Skip to main content

modules

@dopt/react / Exports

@dopt/react

Table of contents

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

NameTypeDescription
idstringone 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

NameTypeDescription
ComponentComponentType<T>the React component you with to inject Dopt props into
idstringone 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
NameType
propsT
Returns

Element

NameType
displayNamestring

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

NameTypeDescription
sidstring['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

NameTypeDescription
ComponentComponentType<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
NameType
propsT
Returns

Element

NameType
displayNamestring

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

NameTypeDescription
idstringone 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

NameTypeDescription
ComponentComponentType<T>the React component to inject Dopt props into
idstringone 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
NameType
propsT
Returns

Element

NameType
displayNamestring

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

NameTypeDescription
idstringone 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

NameTypeDescription
ComponentComponentType<T>the React component to inject Dopt props into
idstringone 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
NameType
propsT
Returns

Element

NameType
displayNamestring

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

NameTypeDescription
sidstring['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

NameType
propsProviderConfig

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

NameType
kind"block"
uidstring
sidstring
versionnumber
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

NameType
sidstring
typeFIELD_VALUE_LITERALS
valuenull | 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

NameType
kind"flow"
uidstring
sidstring
versionnumber
state{ completed: boolean ; exited: boolean ; started: boolean }
state.completedboolean
state.exitedboolean
state.startedboolean
type"flow"
blocksundefined | ({ 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

NameType
kind"block"
uidstring
sidstring
versionnumber
state{ active: boolean ; completed: boolean }
state.activeboolean
state.completedboolean
type"set"
orderedundefined | boolean
sizenumber
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

Ƭ 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


BlockWithGetField

Ƭ BlockWithGetField: Object

Type declaration

NameType
kind"block"
uidstring
sidstring
versionnumber
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

NameType
pendingboolean
failedboolean

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