Package Exports
- @formsort/react-embed
- @formsort/react-embed/lib/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@formsort/react-embed) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
@formsort/react-embed
Embed Formsort flows within react components
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:
import React from 'react';
import EmbedFlow from '@formsort/react-embed';
const EmbedFlowExample: React.FunctionComponent = () => (
<div>
<EmbedFlow
clientLabel="formsort"
flowLabel="onboarding"
variantLabel="main"
embedConfig={{
style: {
width: '100%',
height: '100%',
},
}}
/>
</div>
);Events
You can add event listeners to flows like Flowloaded, redirect etc. See all event listeners
Props
| 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.') } |