modules

@dopt/react / Exports

@dopt/react

Functions

Interfaces

Type Aliases

Variables

Functions

useBlock

▸ useBlock(id): [block: BlockWithGetField, intent: BlockIntentions]

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

Example

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

export function Application() {
  const [block, intent] = useBlock("HNWvcT78tyTwygnbzU6SW");
  return (
    <main>
      <Modal isOpen={block.state.active}>
        <h1>👏 Welcome to our app!</h1>
        <p>This is your onboarding experience!</p>
        <button onClick={intent.complete}>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

[block: BlockWithGetField, intent: BlockIntentions]

[BlockWithGetField, BlockIntentions] the state of the block and methods to manipulate said state

Defined in

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

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 intent props injected in

▸ (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: Partial<Object>, intent: FlowIntentions]

A React hook for accessing a flow's state and methods corresponding to an intent-based API for manipulating said 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.completed}>
        <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: Partial<Object>, intent: FlowIntentions]

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

Defined in

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

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 intent 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:28

useOrderedGroup

▸ useOrderedGroup(id): [block: OrderedGroupBlock, intent: OrderedGroupBlockIntentions]

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

Example

export function Application() {
  const [group, groupIntent] = useOrderedGroup("HNWvcT78tyTwygnbzU6SW");
  const [block, blockIntent] = useBlock("HJDdinfT60yywdls893");

  return (
    <main>
      <Modal isOpen={block.state.active}>
        <h1>👏 Welcome to our app!</h1>
        <p>This is your onboarding experience!</p>
        <p>You are on step {group.getCompleted() + 1}</p>
        <button onClick={group.next}>Next</button>
        <button onClick={groupIntent.complete}>Exit</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

[block: OrderedGroupBlock, intent: OrderedGroupBlockIntentions]

[OrderedGroupBlock, OrderedGroupBlockIntentions] the state of the block and methods to manipulate said state

Defined in

packages/@dopt/react/src/use-ordered-group.ts:119

withOrderedGroup

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

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

Example

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

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

Type parameters

Name
`T`

Parameters

Name	Type	Description
`Component`	`ComponentType`<`T`>	the React component 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 set and intent props injected in

▸ (props): Element

Parameters

Name	Type
`props`	`T`

Returns

Element

Name	Type
`displayName`	`string`

Defined in

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

useUnorderedGroup

▸ useUnorderedGroup(id): [block: UnorderedGroupBlock, intent: UnorderedGroupBlockIntentions]

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

Example

export function Application() {
  const [group, groupIntent] = useUnorderedGroup("HNWvcT78tyTwygnbzU6SW");
  const [block, blockIntent] = useBlock("HJDdinfT60yywdls893");

  return (
    <main>
      <Modal isOpen={block.state.active}>
        <h1>👏 Welcome to our app!</h1>
        <p>This is your onboarding experience!</p>
        <p>You are on step {group.getCompleted() + 1}</p>
        <button onClick={blockIntent.complete}>Next</button>
        <button onClick={groupIntent.complete}>Exit</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

[block: UnorderedGroupBlock, intent: UnorderedGroupBlockIntentions]

[UnorderedGroupBlock, UnorderedGroupBlockIntentions] the state of the block and methods to manipulate said state

Defined in

packages/@dopt/react/src/use-unordered-group.ts:90

withUnorderedGroup

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

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

Example

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

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

Type parameters

Name
`T`

Parameters

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

Returns

fn

The original component with set and intent props injected in

▸ (props): Element

Parameters

Name	Type
`props`	`T`

Returns

Element

Name	Type
`displayName`	`string`

Defined in

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

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:45

Type Aliases

Block

Ƭ Block: Object

This union type encapsulates all allowed block types. In general, blocks have:

state: whether the block is active or completed
uid: the identifier for the block

Step (model) blocks also have:

fields: an array of Field values

Group (set) blocks also have:

blocks, size, and ordered values.

Only model and set blocks are exposed to client-side SDKs.

Type declaration

Name	Type
`kind`	`"block"`
`uid`	`string`
`sid`	`string`
`version`	`number`
`state`	{ `active`: `boolean` ; `completed`: `boolean` } \| { `active`: `boolean` ; `completed`: `boolean` } \| { `active`: `boolean` ; `completed`: `boolean` } \| { `active`: `boolean` ; `completed`: `boolean` } \| { `active`: `boolean` ; `completed`: `boolean` } \| { `active`: `boolean` ; `completed`: `boolean` }
`type`	`"boolean"` \| `"model"` \| `"entry"` \| `"finish"` \| `"set"` \| `"webhook"`

Defined in

packages/@dopt/block-types/dist/block/index.d.ts:19

packages/@dopt/block-types/dist/block/index.d.ts:155

Field

Ƭ Field: Object

This type defines all the properties of a field. A field contains:

sid: a string, the identifier for the field
type: a string literal, one of "string", "number", or "boolean"
value: the value of the field, this must have type string, number, boolean, or null if the value is empty

Type declaration

Name	Type
`sid`	`string`
`type`	`FIELD_VALUE_LITERALS`
`value`	`null` \| `string` \| `number` \| `boolean`

Defined in

packages/@dopt/block-types/dist/fields/fields.d.ts:33

packages/@dopt/block-types/dist/fields/fields.d.ts:56

Flow

Ƭ Flow: Object

This type defines all the properties of a flow. A flow contains:

uid / sid: a string, the identifier for the flow
version: a number, the version of the flow being fetched (0 refers to the uncommitted version)
state: a FlowState object tracking whether the flow has been started, completed, and / or exited
blocks: an array, the array of all its child blocks

Type declaration

Name	Type
`kind`	`"flow"`
`uid`	`string`
`sid`	`string`
`version`	`number`
`state`	{ `completed`: `boolean` ; `exited`: `boolean` ; `started`: `boolean` }
`state.completed`	`boolean`
`state.exited`	`boolean`
`state.started`	`boolean`
`type`	`"flow"`
`blocks`	`undefined` \| ({ `kind`: `"block"` ; `uid`: `string` ; `sid`: `string` ; `version`: `number` ; `state`: { active: boolean; completed: boolean; } } & { `type`: `"model"` ; `fields`: ({ readonly sid: string; } & { readonly type: FIELD_VALUE_LITERALS; readonly value: string \| null; } \| { readonly sid: string; } & { readonly type: FIELD_VALUE_LITERALS; readonly value: number \| null; } \| { readonly sid: string; } & { readonly type: FIELD_VALUE_LITERALS; readonly value: boolean \| null; })[] } \| { `kind`: `"block"` ; `uid`: `string` ; `sid`: `string` ; `version`: `number` ; `state`: { active: boolean; completed: boolean; } } & { `type`: `"entry"` ; `expression`: `undefined` \| (...`param`: []) => `Promise`<`boolean`> } \| { `kind`: `"block"` ; `uid`: `string` ; `sid`: `string` ; `version`: `number` ; `state`: { active: boolean; completed: boolean; } } & { `type`: `"boolean"` ; `expression`: (...`param`: []) => `Promise`<`boolean`> } \| { `kind`: `"block"` ; `uid`: `string` ; `sid`: `string` ; `version`: `number` ; `state`: { active: boolean; completed: boolean; } } & { `type`: `"finish"` } \| { `kind`: `"block"` ; `uid`: `string` ; `sid`: `string` ; `version`: `number` ; `state`: { active: boolean; completed: boolean; } } & { `type`: `"set"` ; `ordered`: `undefined` \| `boolean` ; `size`: `number` ; `blocks`: { readonly kind: "block"; readonly uid: string; readonly sid: string; readonly version: number; readonly state: { active: boolean; completed: boolean; }; } & { readonly type: "model"; readonly fields: (({ readonly sid: string; } & { readonly type: FIELD_VALUE_LITERALS; readonly value: string \| null; }) \| ({ readonly sid: string; } & { ...; }) \| ({ ...; } & { ...; }))[]; }[] } \| { `kind`: `"block"` ; `uid`: `string` ; `sid`: `string` ; `version`: `number` ; `state`: { active: boolean; completed: boolean; } } & { `type`: `"webhook"` ; `request`: (...`param`: []) => `Promise`<{ ok: boolean; redirected: boolean; status: number; statusText: string; url: string; }> })[]

Defined in

packages/@dopt/block-types/dist/flow/index.d.ts:8

packages/@dopt/block-types/dist/flow/index.d.ts:150

Set

Ƭ Set: Object

This type defines all the properties of a group (set) block. In addition to all the attributes of a regular step (or model) block, a group block also contains:

size: a number, the number of children blocks it encapsulates
ordered: a boolean, whether the group is ordered or unordered
blocks: an array, the array of all its child blocks

Type declaration

Name	Type
`kind`	`"block"`
`uid`	`string`
`sid`	`string`
`version`	`number`
`state`	{ `active`: `boolean` ; `completed`: `boolean` }
`state.active`	`boolean`
`state.completed`	`boolean`
`type`	`"set"`
`ordered`	`undefined` \| `boolean`
`size`	`number`
`blocks`	{ `kind`: `"block"` ; `uid`: `string` ; `sid`: `string` ; `version`: `number` ; `state`: { active: boolean; completed: boolean; } } & { `type`: `"model"` ; `fields`: ({ readonly sid: string; } & { readonly type: FIELD_VALUE_LITERALS; readonly value: string \| null; } \| { readonly sid: string; } & { readonly type: FIELD_VALUE_LITERALS; readonly value: number \| null; } \| { readonly sid: string; } & { readonly type: FIELD_VALUE_LITERALS; readonly value: boolean \| null; })[] }[]

Defined in

packages/@dopt/block-types/dist/block/set.d.ts:37

packages/@dopt/block-types/dist/block/set.d.ts:87

FIELD_VALUE_LITERALS

Ƭ FIELD_VALUE_LITERALS: "string" | "number" | "boolean"

The literal strings corresponding to field value types, "string", "number", and "boolean".

Defined in

packages/@dopt/block-types/dist/fields/fields.d.ts:10

packages/@dopt/block-types/dist/fields/fields.d.ts:11

FIELD_VALUE_UNION_TYPE

Ƭ FIELD_VALUE_UNION_TYPE: string | number | boolean | null

The supported types for a field's value: string, number, and boolean. This type also includes null for when the field's value is empty.

Defined in

packages/@dopt/block-types/dist/fields/fields.d.ts:6

LogLevels

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

Defined in

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

BlockWithGetField

Ƭ BlockWithGetField: Object

Type declaration

Name	Type
`kind`	`"block"`
`uid`	`string`
`sid`	`string`
`version`	`number`
`state`	{ `active`: `boolean` ; `completed`: `boolean` } \| { `active`: `boolean` ; `completed`: `boolean` } \| { `active`: `boolean` ; `completed`: `boolean` } \| { `active`: `boolean` ; `completed`: `boolean` } \| { `active`: `boolean` ; `completed`: `boolean` } \| { `active`: `boolean` ; `completed`: `boolean` }
`type`	`"boolean"` \| `"model"` \| `"entry"` \| `"finish"` \| `"set"` \| `"webhook"`
`getField`	<T>(`name`: `string`, `defaultValue?`: `T`) => `null` \| `T`

Defined in

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

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:37

Variables

Block

• Const Block: TUnion

Defined in

packages/@dopt/block-types/dist/block/index.d.ts:19

packages/@dopt/block-types/dist/block/index.d.ts:155

Field

• Const Field: TUnion

Defined in

packages/@dopt/block-types/dist/fields/fields.d.ts:33

packages/@dopt/block-types/dist/fields/fields.d.ts:56

Flow

• Const Flow: TObject

Defined in

packages/@dopt/block-types/dist/flow/index.d.ts:8

packages/@dopt/block-types/dist/flow/index.d.ts:150

Set

• Const Set: TIntersect

Defined in

packages/@dopt/block-types/dist/block/set.d.ts:37

packages/@dopt/block-types/dist/block/set.d.ts:87

FIELD_VALUE_LITERALS

• FIELD_VALUE_LITERALS: Record<string, FIELD_VALUE_LITERALS>

Defined in

packages/@dopt/block-types/dist/fields/fields.d.ts:10

packages/@dopt/block-types/dist/fields/fields.d.ts:11

@dopt/react

Table of contents​

Functions​

Interfaces​

Type Aliases​

Variables​

Functions​

useBlock​

Parameters​

Returns​

Defined in​

withBlock​

Type parameters​

Parameters​

Returns​

Parameters​

Returns​

Defined in​

useFlow​

Parameters​

Returns​

Defined in​

withFlow​

Type parameters​

Parameters​

Returns​

Parameters​

Returns​

Defined in​

useOrderedGroup​

Parameters​

Returns​

Defined in​

withOrderedGroup​

Type parameters​

Parameters​

Returns​

Parameters​

Returns​

Defined in​

useUnorderedGroup​

Parameters​

Returns​

Defined in​

withUnorderedGroup​

Type parameters​

Parameters​

Returns​

Parameters​

Returns​

Defined in​

useDoptInitialized​

Returns​

Defined in​

useFlowStatus​

Parameters​

Returns​

Defined in​

DoptProvider​

Parameters​

Returns​

Defined in​

Type Aliases​

Block​

Type declaration​

Defined in​

Field​

Type declaration​

Defined in​

Flow​

Type declaration​

Defined in​

Set​

Type declaration​

Defined in​

FIELD_VALUE_LITERALS​

Defined in​

FIELD_VALUE_UNION_TYPE​

Defined in​

LogLevels​

Table of contents

Functions

Interfaces

Type Aliases

Variables

Functions

useBlock

Parameters

Returns

Defined in

withBlock

Type parameters

Parameters

Returns

Parameters

Returns

Defined in

useFlow

Parameters

Returns

Defined in

withFlow

Type parameters

Parameters

Returns

Parameters

Returns

Defined in

useOrderedGroup

Parameters

Returns

Defined in

withOrderedGroup

Type parameters

Parameters

Returns

Parameters

Returns

Defined in

useUnorderedGroup

Parameters

Returns

Defined in

withUnorderedGroup

Type parameters

Parameters

Returns

Parameters

Returns

Defined in

useDoptInitialized

Returns

Defined in

useFlowStatus

Parameters

Returns

Defined in

DoptProvider

Parameters

Returns

Defined in

Type Aliases

Block

Type declaration

Defined in

Field

Type declaration

Defined in

Flow

Type declaration

Defined in

Set

Type declaration

Defined in

FIELD_VALUE_LITERALS

Defined in

FIELD_VALUE_UNION_TYPE

Defined in

LogLevels

Defined in