Package Exports

@modern-treasury/user-onboarding-react
@modern-treasury/user-onboarding-react/dist/index.esm.js
@modern-treasury/user-onboarding-react/dist/index.js
@modern-treasury/user-onboarding-react/dist/index.umd.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 (@modern-treasury/user-onboarding-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Getting Started with `user-onboarding-react`

React component for integrating with Modern Treasury's Compliance User Onboarding

Install

To install the user-onboarding-react npm package, you must use one of the following commands.

NPM Installation

npm install @modern-treasury/user-onboarding-react

Yarn Installation

yarn add @modern-treasury/user-onboarding-react

Documentation

To start onboarding users to your application, you must generate a User Onboarding Object and use its ID to start the session.

Creating User Onboarding Objects

Create a User Onboarding and replace with your User Onboarding's ID.

For a demo of this SDK being used, look here.

Examples

Functional Option

import { useMTUserOnboarding } from "@modern-treasury/user-onboarding-react";

// Pass in optional options as shown below
const options = {
 ...
}

const [ready, error, open] = useMTUserOnboarding(options);

return (
  <button
    onClick={() => open("<GENERATED_USER_ONBOARDING_ID>")}
    disabled={!ready}
  >
    Open MT-Onboarding
  </button>
);

Default Button Option

import { MTUserOnboarding } from "@modern-treasury/user-onboarding-react";

const options = {
  userOnboardingId: "<GENERATED_USER_ONBOARDING_ID>",
  onSuccess: () => {
    console.log("MT User Onboarding is a Success!");
  },
  onCancel: () => {
    console.log("MT User Onboarding has been Canceled!");
  },
  onError: () => {
    console.log("MT User Onboarding has an Error!");
  },
  style: {
    backgroundColor: "green",
    boarder: "none",
    color: "white",
    width: "200px",
    height: "75px",
    children: "Open User Onboarding",
    className: "MT-Onboarding",
    padding: "15px 32px",
    textAlign: "center" as const,
    textDecoration: "none",
    display: "inline-block",
    fontSize: "16px",
  },
};

function App() {
  return (
    <div className="App">
      <MTUserOnboarding {...options}>
        Open MTUserOnboarding
      </MTUserOnboarding>
    </div>
  );
}

@modern-treasury/user-onboarding-react