React SDK
The Quiltt React SDK which provides Components and Hooks for integrating Quiltt into React-based applications.
Documentation
For full documentation, additional examples and the SDK 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#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