The Dopt React SDK offers a convient framework-native client for accessing Dopt's Block Model API, allowing you to bind user journey state (defined in Dopt) to your UI.
Check out our type doc for source code level documentation!
Via Yarn:
yarn add @dopt/react
Via NPM:
npm install @dopt/react
To configure the Dopt Provider you will need
You can initialize Dopt in your App by integrating the <DoptProvider />
as follows:
import { DoptProvider } from "@dopt/react";
import Application from "./application";
const rootElement = document.getElementById("root");
ReactDOM.render(
<DoptProvider userId={userId} apiKey={apiKey}>
<Application />
</DoptProvider>,
rootElement
);
Having integrated the Provider you can now access Dopt Model State from anywhere in your app (<Application />
in this example) using our the useDopt Hook or withDopt HOC.
Using the useDopt Hook.
import { useDopt } from "@dopt/react";
import { Modal } from "@your-company/modal";
export function Application() {
const [{ active }, { complete }] = useDopt("HNWvcT78tyTwygnbzU6SW");
return (
<main>
<Modal
isOpen={active}
title="👏 Welcome to your first journey!"
footerItems={{
primaryActions: [{ label: "Got it", onClick: complete }],
}}
>
<Text>This is your onboarding experience!</Text>
</Modal>
</main>
);
}
Using the withDopt HOC
import { withDopt } from "@dopt/react";
import { WelcomeModal } from "./welcome-modal";
export function Application() {
const WelcomeModalWithDopt = withDopt(WelcomeModal, "j0zExxZDVKCPXPzB2ZgpW");
return (
<main>
<WelcomeModalWithDopt />
</main>
);
}
Generated using TypeDoc