# FullPageView component for Stripe Apps

Use FullPageView to implement full-page Stripe Apps

# v8

> This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/fullpageview?app-sdk-version=8.

The `FullPageView` component isn’t available in the selected SDK version.


# v9

> This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/fullpageview?app-sdk-version=9.

To add the `FullPageView` component to your app:

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

The `FullPageView` component provides a standardized 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 customized. 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 customized 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 organize 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 a 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 the currently selected tabs are always synced.
- `FullPageTabs` manages a bidirectional synchronization between tab selection and a browser route.

### Link to full page route

If you want to create a link to the full page app route (for example, from a viewport rendered in the Dashboard drawer), you can use capabilities of the [`Link`](https://docs.stripe.com/stripe-apps/components/link.md). Starting from `@stripe/ui-extension-sdk/v/9.2.0`, the `href` property of the `Link` component supports a string value, and a descriptor object that lets you define an intent to navigate to a set of predefined Dashboard routes (such as `/app/:appId` or `/invoices/:invoiceId`).

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

export function FullPageLink(tabId?: string) {
  return (
    <Link
      href={{
        name: 'fullPageApp',
        params: {appId: 'my.app' , 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)