# FullPageView component for Stripe Apps

Use FullPageView to implement the full-page viewport in Stripe Apps

# v9


To add the `FullPageView` component to your app:

```js
import {FullPageView, FullPageTabs, FullPageTab} from '@stripe/ui-extension-sdk/ui';
```

The `FullPageView` component provides a standardised way to implement the `stripe.dashboard.fullpage` viewport by rendering a Dashboard page header with action buttons and a main slot whose content can be customised. Using `FullPageView` makes your Stripe App UI almost indistinguishable from other Dashboard pages.

## Recommended UI patterns

### Tabs

Although the content of the `FullPageView` component can be customised using a full set of [Stripe Apps UI components](https://docs.stripe.com/stripe-apps/components.md), it’s highly recommended to implement a *Tabs* pattern that is also used on many existing first-party Dashboard pages. This pattern can be implemented using the [`FullPageTabs`](https://docs.stripe.com/stripe-apps/components/fullpagetabs.md) component. Following this recommendation will organise page content into sections, displaying one panel of content at a time while allowing users to navigate between them.

## Integration with Dashboard routing

### Unique route for each full page tab

The main advantage of implementing the *Tabs* UI pattern described above is seamless integration with the Dashboard routing system:

- Each tab section gets its own URL that looks like this: `/app/:appId/:tabId`
- The value of the `:tabId` parameter is automatically derived from the `FullPageTab#id` prop.
- The Dashboard URL and currently selected tabs are always synced.
- `FullPageTabs` manages a bidirectional synchronisation between tab selection and a browser route.

### Link to Full page route

To navigate users to your app’s full-page view from another viewport (for example, from the drawer) pass a [route descriptor](https://docs.stripe.com/stripe-apps/route-descriptors.md) to the `href` prop of [`Link`](https://docs.stripe.com/stripe-apps/components/link.md) or [`Button`](https://docs.stripe.com/stripe-apps/components/button.md):

```tsx
import {Link} from '@stripe/ui-extension-sdk/ui';

export function FullPageLink({tabId}: {tabId?: string}) {
  return (
    <Link
      href={{
        name: 'fullPage',
        params: {tabId},
      }}
    >
      Open full-page app
    </Link>
  );
}
```

## Basic

The following example demonstrates how to use the `FullPageView` component, where a different React view is rendered for each tab.

### FullPageView props

| Property     | Type                                                                                                                                                                           |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `children`   | (Required)
  `React.ReactNode`

  Allowed children components: `FullPageTab`.                                                                                                  |
| `pageAction` | (Optional)
  `FullPageAction | undefined`

  A page action.

  Related types: [FullPageAction](https://docs.stripe.com/stripe-apps/components/fullpageview.md#fullpageaction). |

### FullPageAction

| Property  | Type                                                          |
| --------- | ------------------------------------------------------------- |
| `label`   | (Required)
  `string`

  The label of the action.             |
| `onPress` | (Required)
  `() => void`

  An event handler for the action. |


## 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)