React SDK

The Quiltt React SDK provides Components and Hooks for seamless integration of the Quiltt Connector into your React app.

Link to this section#Installation

Link to this section#Handling Authentication

To load the Connector for use by a pre-existing end-user, you'll need to pass a valid Session token. See the Authentication guide for more information on generating Session tokens.

Link to this section#Using the Provider Component

The QuilttProvider is the easiest way to pass a Session token to your React app.

With the QuilttProvider handling authentication, your QuilttButton and QuilttContainer components will now automatically use the imported Session token.

Link to this section#Using the Hook

For more granular access, including the ability to read, import and revoke Session tokens, use the useQuilttSession hook.

Link to this section#Quickstart Examples

Link to this section#Connect with a Button

Link to this section#Reconnect with a Button

Link to this section#Prefilled Institution Search with a Button

Link to this section#Connect Inside a Container

Link to this section#Reconnect Inside a Container

Link to this section#Prefilled Institution Search Inside a Container

Link to this section#Checking Provider Institution Compatibility

Use the useQuilttResolvable hook to check if external provider institution IDs (e.g., Plaid) are supported to your connector.

The example above will only render the Quiltt launcher button if your Plaid-enabled Connector supports connecting to Chase.

Link to this section#TypeScript

The React package comes bundled with the @quiltt/core package, which contains type definitions for all components and hooks.

See the definition file on Github

Link to this section#Next.js

For developers looking to quickly bootstrap a Next.js project with Quiltt integration, we offer a pre-configured template:

Quiltt Next.js Template

This template provides a solid foundation for building fintech applications with Quiltt and Next.js. It includes:

• Next.js 14 with App Router
• TypeScript for type safety
• Quiltt React SDK integration
• GraphQL code generation for Quiltt API
• Authentication flow (Login and Signup)
• Tailwind CSS for styling

To get started with the template, clone the repository and follow the setup instructions in the README. This can significantly speed up your development process and ensure you're following best practices for Quiltt integration from the start.