Quiltt Logo

React SDK

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

Documentation

For full documentation, additional examples and the source code, see the Quiltt React SDK on Github.

Link to this section#Installation

$ npm install @quiltt/react

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.

import { QuilttProvider } from '@quiltt/react'

export const App = () => {
  return <QuilttProvider token={'{SESSION_TOKEN}'}>{children}</QuilttProvider>
}

export default App

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.

import { useCallback, useEffect } from 'react'

import { useQuilttSession } from '@quiltt/react'

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

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

  console.log('Session token: ', session?.token)

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

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

  return (
    <>
      {session && <button onClick={logOut}>Log Out</button>}
      {children}
    </>
  )
}

export default App

Link to this section#Quickstart Examples

Link to this section#Connect with a Button

import { QuilttButton } from '@quiltt/react'

export const App = () => {
  const handleLoad = (metadata) => console.log(`Connector ${metadata.connectorId} loaded!`)
  const handleExitSuccess = (metadata) => console.log('Successfully added: ', metadata.connectionId)

  return (
    <QuilttButton
      connectorId="<CONNECTOR_ID>"
      onLoad={handleLoad}
      onExitSuccess={handleExitSuccess}
      // ... other props to pass through to the launcher <button>
    >
      Add
    </QuilttButton>
  )
}

export default App

Link to this section#Reconnect with a Button

import { QuilttButton } from '@quiltt/react'

export const App = () => {
  const handleExitSuccess = (metadata) => {
    console.log('Successfully reconnected: ', metadata.connectionId)
  }

  return (
    <QuilttButton
      connectorId="<CONNECTOR_ID>"
      connectionId="<CONNECTION_ID>"
      onExitSuccess={handleExitSuccess}
      // ... other props to pass through to the launcher <button>
    >
      Reconnect
    </QuilttButton>
  )
}

Link to this section#Prefilled Institution Search with a Button

import { QuilttButton } from '@quiltt/react'

export const App = () => {
  const handleExitSuccess = (metadata) => {
    console.log('Successfully reconnected: ', metadata.connectionId)
  }

  return (
    <QuilttButton
      connectorId="<CONNECTOR_ID>"
      institution="<SEARCH_TERM>"
      onExitSuccess={handleExitSuccess}
      // ... other props to pass through to the launcher <button>
    >
      Reconnect
    </QuilttButton>
  )
}

Link to this section#Connect Inside a Container

import { QuilttContainer } from '@quiltt/react'

export const App = () => {
  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"
      styles={{ height: '100%' }}
      // ... other props to pass through to the container <div>
    />
  )
}

export default App

Link to this section#Reconnect Inside a Container

import { QuilttContainer } from '@quiltt/react'

export const App = () => {
  const handleExitSuccess = (metadata) => {
    console.log('Successfully reconected: ', metadata.connectionId)
  }

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

export default App

Link to this section#Prefilled Institution Search Inside a Container

import { QuilttContainer } from '@quiltt/react'

export const App = () => {
  const handleExitSuccess = (metadata) => {
    console.log('Successfully reconected: ', metadata.connectionId)
  }

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

export default App

Link to this section#Typescript

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

See the definition file on Github

React Native →