modules
@dopt/react / Exports
@dopt/react
Table of contents
Functions
- useBlock
- withBlock
- useFlow
- withFlow
- useOrderedGroup
- withOrderedGroup
- useUnorderedGroup
- withUnorderedGroup
- useDoptInitialized
- useFlowStatus
- DoptProvider
Interfaces
- BlockIntentions
- FlowIntentions
- OrderedGroupBlock
- OrderedGroupBlockIntentions
- UnorderedGroupBlock
- UnorderedGroupBlockIntentions
- ProviderConfig
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
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 completeduid
: the identifier for the block
Step (model
) blocks also have:
fields
: an array of Field values
Group (set
) blocks also have:
blocks
,size
, andordered
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 fieldtype
: a string literal, one of "string", "number", or "boolean"value
: the value of the field, this must have type string, number, boolean, ornull
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 flowversion
: 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 exitedblocks
: 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 encapsulatesordered
: a boolean, whether the group is ordered or unorderedblocks
: 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
Ƭ 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
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