JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 2305
  • Score
    100M100P100Q124239F
  • License ISC

Embed formsort flows in react components

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
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%' } }
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