modules

@dopt/react / Exports

@dopt/react

Table of contents

Interfaces

• Container
• ProviderConfig
• Block
• Flow
• Field
• FlowIntent

Type Aliases

• LogLevels
• FlowStatus
• BlockTransition

Variables

• URL_PREFIX

Functions

• useBlock
• withBlock
• useFlow
• withFlow
• useContainer
• useDoptInitialized
• useFlowStatus
• DoptProvider

Type Aliases

LogLevels

Ƭ LogLevels: "trace" | "debug" | "info" | "warn" | "error" | "silent"

The different log levels ranging from trace (most verbose) to silent (no logs).

Defined in

packages/@dopt/logger/dist/index.d.ts:12

---

FlowStatus

Ƭ FlowStatus: Object

This type encapsulates Flow initialization status. When a Flow is first fetched by Dopt, it will be in the pending state (pending: true). Dopt will then evaluate whether a user qualifies for a flow and if any state updates need to occur. When those are complete, the status will be updated to pending: false. If any errors occur during this process, the status will be additionally be updated to failed: true.

Type declaration

Name	Type
pending	boolean
failed	boolean

Defined in

packages/@dopt/react/src/types.ts:50

---

BlockTransition

Ƭ BlockTransition<T>: (...inputs: T extends BlockTransitionInputs ? [T[number], ...T[number][]] : BlockTransitionInputs) => void | undefined

Type parameters

Name
T

Type declaration

▸ (...inputs): void | undefined

A function correspond to an intent-based API for signaling state transitions on a block. This function has side effects: it changes the state of other blocks and the flow as well. For example, transitioning a block activates the next block and transitioning the last block finishes a flow.

Calling the transition signals that the experience the Block powers has finished. A noop if the Block isn't active.

Example

const [, transition] = useBlock("HNWvcT78tyTwygnbzU6SW");
// transitioning a single edge
transition('first-edge');

// transitioning multiple edges
transition('second-edge', 'third-edge');

In typescript, if a block is accessed with generics:

const [, transition] = useBlock<['a-edge']>("HNWvcT78tyTwygnbzU6SW");

// this is valid
transition('a-edge');

// this is invalid
transition('b-edge');

Modifies

Sets Block's ['state']['exited'] to true. Sets Block's ['state']['active'] to false.

Parameters

Name	Type
...inputs	T extends BlockTransitionInputs ? [T[number], ...T[number][]] : BlockTransitionInputs

Returns

void | undefined

Defined in

packages/@dopt/react/src/types.ts:216

Variables

URL_PREFIX

• Const URL_PREFIX: string

Defined in

packages/@dopt/react/src/utils.ts:3

Functions

useBlock

▸ useBlock<T>(id): [block: Block<T>, transition: BlockTransition<T>]

A React hook for accessing a block's state and methods corresponding to an intent-based API for manipulating said block state.

Example

import { useBlock } from "@dopt/react";
import { Modal } from "@your-company/modal";

export function Application() {
  const [block, transition] = useBlock("HNWvcT78tyTwygnbzU6SW");
  const onClick = useCallback(() => {
    transition('default');
  }, [transition]);
  return (
    <main>
      <Modal isOpen={block.state.active}>
        <h1>👏 Welcome to our app!</h1>
        <p>This is your onboarding experience!</p>
        <button onClick={onClick}>Close me</button>
      </Modal>
    </main>
  );
}

Type parameters

Name
T

Parameters

Name	Type	Description
id	string	one of ['sid'] | ['uid'] this param accepts either the user defined identifier (sid) or the system created identifier (the uid)

Returns

[block: Block<T>, transition: BlockTransition<T>]

[Block, BlockTransition] the state of the block and methods to manipulate block state

Defined in

packages/@dopt/react/src/use-block.ts:39

---

withBlock

▸ withBlock<T>(Component, id): (props: T) => Element

A React HOC for accessing block state and methods corresponding to an intent-based API for maniuplating said state.

Example

 import { withDopt } from '@dopt/react';
 import { WelcomeModal } from './welcome-modal';

 export function Application() {
   const WelcomeModalWithDopt = withDopt(WelcomeModal, 'j0zExxZDVKCPXPzB2ZgpW');
   return (
     <main>
       <WelcomeModalWithDopt />
     </main>
   );
 }

Type parameters

Name
T

Parameters

Name	Type	Description
Component	ComponentType<T>	the React component you with to inject Dopt props into
id	string	one of ['sid'] | ['uid'] this param accepts either the user defined identifier (sid) or the system created identifier (the uid)

Returns

fn

The original component with Block and BlockTransition injected as props.

▸ (props): Element

Parameters

Name	Type
props	T

Returns

Element

Name	Type
displayName	string

Defined in

packages/@dopt/react/src/with-block.tsx:30

---

useFlow

▸ useFlow(sid): [flow: Flow, intent: FlowIntent]

A React hook for accessing a flow's state and methods corresponding to an intent-based API for manipulating flow state.

Example

import { useFlow } from "@dopt/react";
import { Modal } from "@your-company/modal";

export function Application() {
  const [flow, intent] = useFlow("new-user-onboarding");
  return (
    <main>
      <Modal isOpen={flow.state.finished}>
        <h1>👏 Your onboarding has finished!</h1>
        <p>Want to reset? click the button below.</p>
        <button onClick={intent.reset}>Reset onboarding</button>
      </Modal>
    </main>
  );
}

Parameters

Name	Type	Description
sid	string	['sid']

Returns

[flow: Flow, intent: FlowIntent]

[Flow, FlowIntent] the state of the flow and methods to manipulate flow state

Defined in

packages/@dopt/react/src/use-flow.ts:37

---

withFlow

▸ withFlow<T>(Component, ...useFlowArgs): (props: T) => Element

A React HOC for accessing flow state and methods corresponding to an intent-based API for maniuplating said state.

Example

 import { withFlow } from '@dopt/react';
 import { WelcomeModal } from './welcome-modal';

 export function Application() {
   const WelcomeModalWithDopt = withFlow('new-user-onboarding', 1);
   return (
     <main>
       <WelcomeModalWithDopt />
     </main>
   );
 }

Type parameters

Name
T

Parameters

Name	Type	Description
Component	ComponentType<T>	the React component you with to inject Dopt props into
...useFlowArgs	[sid: string]	-

Returns

fn

The original component with Flow and FlowIntent props injected in

▸ (props): Element

Parameters

Name	Type
props	T

Returns

Element

Name	Type
displayName	string

Defined in

packages/@dopt/react/src/with-flow.tsx:29

---

useContainer

▸ useContainer(id): Container

A React hook for accessing a container's state and methods corresponding to an intent-based API for manipulating said state.

Example

import { useContainer } from "@dopt/react";
import { Modal } from "@your-company/modal";

export function Application() {
  const container = useContainer("HNWvcT78tyTwygnbzU6SW");
  const onClick = useCallback(() => {
    container.transition('dismiss');
  }, [container]);

  const activeChild = container.children[0].state.active ?
    container.children[0] : container.children[1];

  const itemsComplete = container.children[0].state.active ?
    '0 items completed' : '1 item completed';

  return (
    <main>
      <Modal isOpen={container.state.active}>
        <h1>{activeChild.field('title')}</h1>
        <p>{activeChild.field('body')}</p>
        <p>{itemsComplete}</p>
        <button onClick={onClick}>Close me</button>
      </Modal>
    </main>
  );
}

Parameters

Name	Type	Description
id	string	one of ['sid'] | ['uid'] this param accepts either the user defined identifier (sid) or the system created identifier (the uid)

Returns

Container

Container the state of the container and methods to manipulate container state

Defined in

packages/@dopt/react/src/use-container.ts:46

---

useDoptInitialized

▸ useDoptInitialized(): boolean

A React hook for accessing whether Dopt has been initialized.

Dopt-level initialization is defined as:

• all flows have been fetched
• Dopt's socket connection is ready
• all flows which need to be started have been started

Remarks

Note, this hook does not check whether any initialization steps had errors. Use useFlowStatus to check flow status, including failures, at a more granular level.

Returns

boolean

A boolean, true if Dopt is initialized, false otherwise.

Defined in

packages/@dopt/react/src/use-dopt-initialized.ts:19

---

useFlowStatus

▸ useFlowStatus(sid): FlowStatus

A React hook for accessing a Flow's initialization status.

Initialization is defined as:

• the flow has been fetched
• Dopt's socket connection is ready
• the flow has been started, if necessary

Remarks

Once initialized, the status will be marked pending: false. If any parts of initialization fail, the status will additionally have failed: true. If the sid doesn't match any flows, the function will return pending: true, failed: false.

Parameters

Name	Type	Description
sid	string	['sid']

Returns

FlowStatus

A flow's FlowStatus.

Defined in

packages/@dopt/react/src/use-flow-status.ts:23

---

DoptProvider

▸ DoptProvider(props): Element

A React context provider for accessing block state.

Using ProviderConfig

Example

 import { DoptProvider } from '@dopt/react';
 import Application from './application';

 export function Index() {
   return (
     <DoptProvider
       userId={userId}
       apiKey={blockAPIKey}
       flowVersions={{
         onboardingFlow: 3,
         upgradeFlow: 1
       }}
     >
       <Application />
     </DoptProvider>
   );
 }

Parameters

Name	Type
props	ProviderConfig

Returns

Element

Defined in

packages/@dopt/react/src/provider.tsx:49