@formsort/react-embed

Embed Formsort flows within react components.

This is a handy wrapper around @formsort/web-embed-api.

Important note: This package is intended for use in React web applications. If you're looking to embed Formsort flows in React Native applications, please see React native embed guide.

Installation

Add @formsort/react-embed to your project by executing yarn add @formsort/react-embed or npm install @formsort/react-embed.

Usage

Here's an example of basic usage:

``tsx
import React from 'react';
import EmbedFlow from '@formsort/react-embed';

const EmbedFlowExample: React.FunctionComponent = () => (



);
`

$3

You can add event listeners to flows like Flowloaded, redirect etc. See all event listeners

$3

| Prop name | Description | Required | Example values |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ---------------------------------------------------------- |
| clientLabel | client name | yes | formsort |
| flowLabel | flow name | yes | onboarding |
| variantLabel | variant name | no | main |
| responderUuid | responder uuid to load existing answers for | no | e4923baa-dc2d-4555-813c-a166952292fa |
| formsortEnv | formsort integrations environment label, if not using production | no | staging |
| queryParams | additional query params, to pre-populate answers in the form | no | [['name', 'Olivia'], ['age', '3']] |
| embedConfig | config passed to the underlying FormsortWebEmbed | no | { style: { height: '100%' } } |
| onFlowLoaded | event listener | no | () => { console.log('flow loaded') } |
| onFlowClosed | event listener | no | () => { console.log('flow closed') } |
| onFlowFinalized | event listener | no | () => { console.log('flow finalized') } |
| onStepLoaded | event listener | no | () => { console.log('step loaded') } |
| onStepCompleted | event listener | no | () => { console.log('step loaded') } |
| onRedirect | event listener | no | (url: string) => { console.log('redirecting to:', url) } |
| onUnauthorized | event listener | no | () => { console.log('ID token is missing or invalid.') } |

$3

You can use query parameters to load a specific variant revision. Don't use it if you want to show latest variant.

`tsx
import React from 'react';
import EmbedFlow from '@formsort/react-embed';

const EmbedFlowExample: React.FunctionComponent = () => (



);
``