# React SDK
URL: https://www.quiltt.dev/connector/sdk/react
Description: Integrate Quiltt Connector into your React application with our React SDK. Learn how to install the package and get started with quick examples.
Navigation: connector → sdk → react
Tags: Connector, SDKs
Content Length: 9k characters

The [Quiltt React SDK](https://www.npmjs.com/package/@quiltt/react) provides components and hooks for integrating the Quiltt Connector into your React app.

Info - Documentation:
For full documentation, additional examples and the source code, see the [Quiltt React SDK on
  GitHub](https://github.com/quiltt/quiltt-sdks/tree/main/packages/react#readme).

## Installation

Code Examples:

  ```sh
    $ npm install @quiltt/react
    ```
  ```sh
    $ pnpm add @quiltt/react
    ```
  ```sh
    $ yarn add @quiltt/react
    ```

## Handling Authentication

To load the Connector for use by a pre-existing end-user, pass a valid Session token. See the [Authentication guide](/authentication) for more information on generating Session tokens.

### Using the Provider Component

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

```tsx

  // See https://www.quiltt.dev/authentication/issuing-session-tokens
  const sessionToken = '<SESSION_TOKEN_FROM_SERVER>'

  return(
    

QuilttProvider:
[content]

  )
}

```

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

### Using the Hook

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

```tsx

const App = () => {
  const [session, importSession, revokeSession] = useQuilttSession()

  // See https://www.quiltt.dev/authentication/issuing-session-tokens
  const sessionToken = '<SESSION_TOKEN_FROM_SERVER>'

  // Import session from API call, local storage, query param, etc.
  useEffect(() => [importSession(sessionToken)], [importSession, sessionToken])

  console.log('Authenticated Profile ID: ', session?.claims.sub)

  // Revoke and clear the Quiltt session
  const logOut = useCallback(() => [revokeSession()

    // Do other stuff...], [revokeSession])

  return (
    <>
      [session && [Log Out]]
      [content]
    </>
  )
}

```

### Using the Connector Hook

For programmatic control without rendering a component, use the `useQuilttConnector` hook to open the Connector modal imperatively.

```tsx

  const {open} = useQuilttConnector('<CONNECTOR_ID>', [onExitSuccess: () => console.log('Connected!'),])

  return [Add Account]
}

```

## Quickstart Examples

### Connect with a Button

```tsx

  const handleLoad = (metadata) => console.log(`Connector $[metadata.connectorId] loaded!`)
  const handleExitSuccess = (metadata) => console.log('Successfully added: ', metadata.connectionId)

  return (
    

QuilttButton:
"
      onLoad={handleLoad}
      onExitSuccess={handleExitSuccess}
      // ... other props to pass through to the launcher <button>
    >
      Add

  )
}

```

### Reconnect with a Button

```tsx

  const handleExitSuccess = (metadata) => [console.log('Successfully reconnected: ', metadata.connectionId)]

  return (
    

QuilttButton:
"
      connectionId="<CONNECTION_ID>"
      onExitSuccess={handleExitSuccess}
      // ... other props to pass through to the launcher <button>
    >
      Reconnect

  )
}
```

### Prefilled Institution Search with a Button

```tsx

  const handleExitSuccess = (metadata) => [console.log('Successfully reconnected: ', metadata.connectionId)]

  return (
    

QuilttButton:
"
      institution="<SEARCH_TERM>"
      onExitSuccess={handleExitSuccess}
      // ... other props to pass through to the launcher <button>
    >
      Reconnect

  )
}
```

### Connect Inside a Container

```tsx

  const handleLoad = () => console.log('Connector loaded!')
  const handleExitSuccess = (metadata) => console.log('Successfully added: ', metadata.connectionId)

  return (
    <QuilttContainer
      connectorId="<CONNECTOR_ID>"
      onLoad={handleLoad}
      onExitSuccess={handleExitSuccess}
      className="my-css-class"
      style={[height: '100%']}
      // ... other props to pass through to the container />
  )
}

```

### Reconnect Inside a Container

```tsx

  const handleExitSuccess = (metadata) => [console.log('Successfully reconected: ', metadata.connectionId)]

  return (
    <QuilttContainer
      connectorId="<CONNECTOR_ID>"
      connectionId="<CONNECTION_ID>"
      onExitSuccess={handleExitSuccess}
      className="my-css-class"
      style={[height: '100%']}
      // ... other props to pass through to the container <div>
    />
  )
}

```

### Prefilled Institution Search Inside a Container

```tsx

  const handleExitSuccess = (metadata) => [console.log('Successfully reconected: ', metadata.connectionId)]

  return (
    <QuilttContainer
      connectorId="<CONNECTOR_ID>"
      institution="<SEARCH_TERM>"
      onExitSuccess={handleExitSuccess}
      className="my-css-class"
      style={[height: '100%']}
      // ... other props to pass through to the container <div>
    />
  )
}

```

### Checking Provider Institution Compatibility

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

Info:
Contact Quiltt Support to enable access to this feature.

```tsx

function ResolvableConnector([content]) {
  const [checkResolvable, isResolvable, isLoading] = useQuilttResolvable('my-connector-id')

  useEffect(() => {
    checkResolvable([plaid: plaidInstitutionId])
  }, [plaidInstitutionId])

  if (isLoading) return <div>Checking...
  if (!isResolvable) return null

  return <>[content]</>
}

// Usage

ResolvableConnector:

QuilttButton:
Connect through Quiltt

```

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

### Component Props

Shared props for `QuilttButton`, `QuilttContainer`, and `useQuilttConnector`:

| Prop | Type | Description |
| --- | --- | --- |
| `connectorId` | string | **Required.** Quiltt Connector ID |
| `connectionId` | string | Existing connection ID for reconnection |
| `institution` | string | Pre-select an institution |
| `themeMode` | `'light'` \| `'dark'` \| `'auto'` | Theme mode for the Connector UI. Defaults to `'light'` |
| `appLauncherUrl` | string | Deep link URL for OAuth callbacks |
| `nonce` | string | CSP nonce for the script tag when using strict Content Security Policy |
| `forceRemountOnConnectionChange` | boolean | Forces complete remount when `connectionId` changes. Defaults to `false` |
| `onEvent` | `(eventType, metadata) => void` | Intermediate Connector event |
| `onLoad` | `(metadata) => void` | Connector loaded |
| `onExit` | `(eventType, metadata) => void` | Connector exited via an event |
| `onExitSuccess` | `(metadata) => void` | Connection successful |
| `onExitAbort` | `(metadata) => void` | User cancelled |
| `onExitError` | `(metadata) => void` | Error occurred |

`QuilttButton` additionally supports `onOpen` (called just before the connector opens) and `as` (to render as a different element type).

For better tree-shaking, components can also be imported from subpaths:

```tsx

```

### 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](https://github.com/quiltt/quiltt-sdks/blob/main/packages/core/src/api/browser.ts)

### 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](https://github.com/quiltt/quiltt-nextjs-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.