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 Quiltt React SDK on Github.
Link to this section#Installation
$ npm install @quiltt/react
# or
$ yarn add @quiltt/react
# or
$ pnpm add @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#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