Dashboard only
FocusView component for Stripe Apps Dashboard only
Use FocusView to open a dedicated space for the end user to complete a specific task.
SDK version
A FocusView component can be opened from other View components and allows the developer to open a dedicated space for the end user to complete a specific task. Examples include:
- Enter details to create a new entry in a database
- Go through a wizard to decide on next steps
- Confirm that the user wants to take the action they indicated
What FocusView looks like
FocusView must be a child of ContextView. Don’t wrap the FocusView in a conditional, instead use the shown property to control its visible state. For more information, see ContextView.
To add the FocusView component to your app:
FocusView props
| Property | Type |
|---|---|
children | Required React.ReactNode The contents of the component. |
title | Required string The title of the FocusView. This will be displayed at the top of the drawer under your app’s name. |
confirmCloseMessages | Optional ConfirmCloseMessages | undefined If provided, confirmCloseMessages will be displayed when the user closes the FocusView. Related types: ConfirmCloseMessages. |
footerContent | Optional React.ReactNode React node adjacent to any actions in the footer. |
primaryAction | Optional React.ReactElement | undefined A primary call to action (“Save” or “Continue”) Button placed in the footer. |
secondaryAction | Optional React.ReactElement | undefined A secondary call to action (“Cancel”) Button placed in the footer. |
setShown | Optional ((shown: boolean) => void) | undefined Allows the FocusView to manage shown state if a user requests to close the window, or if it needs to stay open because of the close confirmation dialog. |
shown | Optional boolean | undefined Whether the FocusView should be shown or not. This property is maintained by a parent view. |
size | Optional ("small" | "large") | undefined The size of the FocusView drawer. Supports small and large. Defaults to small. |
onClose | Optional Deprecated Use setShown instead. If the user clicks out of the FocusView or presses the Escape key, this informs the extension that the user has closed the view. (() => void) | undefined |
ConfirmCloseMessages
| Property | Type |
|---|---|
cancelAction | Required string |
description | Required string |
exitAction | Required string |
title | Required string |
Close Confirmation Dialog
When passing confirmCloseMessages, in order for the close confirmation dialog to work properly in every close scenario, pass the setShown prop so the FocusView can manage its shown state. To control when the close confirmation dialog displays, you can use state to conditionally pass confirmCloseMessages to the FocusView, like in the following example:
Example
Loading example...