modules
@dopt/react / Exports
@dopt/react
Table of contents
Interfaces
Type Aliases
Variables
Functions
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 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
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