Package Exports

@formsort/react-embed

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 npm install @formsort/react-embed or yarn add @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`
embedConfig	config passed to the underlying `FormsortWebEmbed`	no	`{ style: { height: '100%' } }`
flowloaded	event listener	no	`() => { console.log('flow loaded') }`
flowclosed	event listener	no	`() => { console.log('flow closed') }`
flowfinalized	event listener	no	`() => { console.log('flow finalized') }`
redirect	event listener	no	`(url: string) => { console.log('redirecting to:', url) }`

Testing

npm run test

Publishing

npm publish