React SDK

The Quiltt React SDK which provides Components and Hooks for integrating Quiltt into React-based applications.

Link to this section#Installation

$ npm install @quiltt/react
# or
$ yarn add @quiltt/react
# or
$ pnpm add @quiltt/react

Link to this section#Quickstart Examples

Link to this section#Connect with a Button

import { QuilttButton } from '@quiltt/react'

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

  return (
    <QuilttButton
      connectorId="<CONNECTOR_ID>"
      onExitSuccess={handleSuccess}
      // ... 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 handleSuccess = (metadata) => {
    console.log('Successfully reconnected: ', metadata.connectionId)
  }

  return (
    <QuilttButton
      connectorId="<CONNECTOR_ID>"
      connectionId="<CONNECTION_ID>"
      onExitSuccess={handleSuccess}
      // ... 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 handleExitSuccess = (metadata) => {
    console.log('Successfully added: ', metadata.connectionId)
  }

  return (
    <QuilttContainer
      connectorId="<CONNECTOR_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#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