# FocusView component for Stripe Apps Use FocusView to open a dedicated space for the end user to complete a specific task. # v8 > This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/focusview?app-sdk-version=8. 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 ![](https://b.stripecdn.com/docs-statics-srv/assets/focusview.f2c4048d934cb15b3e9163c82d993624.png) 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](https://docs.stripe.com/stripe-apps/components/contextview.md). To add the `FocusView` component to your app: ```js import {FocusView} from '@stripe/ui-extension-sdk/ui'; ``` ### 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](https://docs.stripe.com/stripe-apps/components/focusview.md#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 button, 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 # v9 > This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/focusview?app-sdk-version=9. 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 ![](https://b.stripecdn.com/docs-statics-srv/assets/focusview.f2c4048d934cb15b3e9163c82d993624.png) 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](https://docs.stripe.com/stripe-apps/components/contextview.md). To add the `FocusView` component to your app: ```js import {FocusView} from '@stripe/ui-extension-sdk/ui'; ``` ### 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](https://docs.stripe.com/stripe-apps/components/focusview.md#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`. | ### 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 ## See also - [Design patterns to follow](https://docs.stripe.com/stripe-apps/patterns.md) - [Style your app](https://docs.stripe.com/stripe-apps/style.md) - [UI testing](https://docs.stripe.com/stripe-apps/ui-testing.md)