Fullscreen

Presents an element in fullscreen using the browser Fullscreen API.

Preview

Live broadcast

import * as React from 'react';
import { Fullscreen } from '@base-ui/react/fullscreen';
import styles from './index.module.css';

export default function ExampleFullscreen() {
  return (
    <Fullscreen.Root>
      <Fullscreen.Container className={styles.Container}>
        <p className={styles.Caption}>Preview</p>
        <span className={styles.Content}>
          <span className={styles.ContentDot} aria-hidden="true" />
          Live broadcast
        </span>

        <Fullscreen.Trigger className={styles.Trigger}>
          <ExpandIcon />
          Enter fullscreen
        </Fullscreen.Trigger>
        <Fullscreen.Close className={styles.Close}>
          <CloseIcon />
          Close
        </Fullscreen.Close>
      </Fullscreen.Container>
    </Fullscreen.Root>
  );
}

function ExpandIcon(props: React.ComponentProps<'svg'>) {
  return (
    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" {...props}>
      <path d="M2 5V2H5M10 7V10H7M5 10H2V7M7 2H10V5" stroke="currentColor" strokeWidth="1.25" />
    </svg>
  );
}

function CloseIcon(props: React.ComponentProps<'svg'>) {
  return (
    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" {...props}>
      <path d="M3 3L9 9M9 3L3 9" stroke="currentColor" strokeWidth="1.25" />
    </svg>
  );
}

Usage guidelines

User gesture required: Browsers only honor requestFullscreen() while the window has transient activation — granted by a recent user interaction (click, tap, keypress) and valid for roughly five seconds. The bundled <Fullscreen.Trigger> always satisfies this. Flipping open from any external handler triggered by a user gesture (including a deferred setTimeout that still runs within the activation window) also works. Requests fired without a recent gesture are rejected.
Browser support: Fullscreen is unavailable on iOS Safari for iPhone (only iPad iOS 16.4+ supports requestFullscreen() on arbitrary elements). When the API is unavailable for the container’s owner document, <Fullscreen.Trigger> is automatically disabled (data-disabled, aria-disabled="true"). The supported state is also exposed on Root, Trigger, Container, and Close so you can render fallback UI.
Inside iframes: The hosting <iframe> must include the allowfullscreen attribute (or allow="fullscreen") and any Permissions Policy must permit the fullscreen feature for the document. Without these, requests are rejected with a TypeError.
Mobile considerations: Some mobile browsers ignore <meta name="viewport"> settings and disable user pinch-zoom while a page is in fullscreen.
Exit affordance: Users can always exit fullscreen with Esc (or F11). The component listens to the browser’s fullscreenchange event and reconciles state automatically — onOpenChange is fired with reason: 'escape-key' in that case.
Esc inside popups: When a <Dialog>, <Popover>, <Menu>, or any other popup is open inside fullscreen, pressing Esc dismisses the popup first instead of immediately exiting fullscreen. Base UI uses the Keyboard Lock API so the keypress reaches JavaScript handlers; popups (which call event.preventDefault() on Esc) keep fullscreen alive, while a “bare” Esc still exits. Keyboard Lock is only implemented in Chromium today — Safari and Firefox keep their native behavior of always exiting fullscreen on Esc.
Portals inside fullscreen: <Dialog.Portal>, <Popover.Portal>, <Menu.Portal>, <Tooltip.Portal>, and every other Base UI portal default to document.body, which the browser hides while a child element is fullscreen. Base UI detects this and reroutes the portal into the active fullscreen element so popups, menus, and overlays stay visible. Portals with an explicit container prop are respected as-is.

Anatomy

Import the component and assemble its parts:

Anatomy

import { Fullscreen } from '@base-ui/react/fullscreen';

<Fullscreen.Root>
  <Fullscreen.Trigger />
  <Fullscreen.Container>
    <Fullscreen.Close />
  </Fullscreen.Container>
</Fullscreen.Root>

The Container is the element passed to the browser’s requestFullscreen(). The Trigger toggles the fullscreen state, and the Close only ever exits fullscreen. Place the Close inside the Container so it remains visible while the page is in fullscreen.

Examples

Styling fullscreen state

<Fullscreen.Container>, <Fullscreen.Trigger>, and <Fullscreen.Close> all expose data-fullscreen and data-not-fullscreen attributes so you can show or hide controls based on the current state without managing it manually.

Hide trigger in fullscreen, show close only when fullscreen

.Trigger[data-fullscreen] {
  display: none;
}

.Close[data-not-fullscreen] {
  display: none;
}

You can also target the container with the standard CSS :fullscreen pseudo-class and style its ::backdrop pseudo-element:

Native :fullscreen and ::backdrop

.Container:fullscreen {
  padding: 2rem;
}

.Container::backdrop {
  background: rgb(0 0 0 / 0.9);
}

Controlled state

Use open and onOpenChange to control the state externally. The second argument to onOpenChange includes a reason that distinguishes between user interactions:

Controlled fullscreen

const [open, setOpen] = React.useState(false);

<Fullscreen.Root
  open={open}
  onOpenChange={(nextOpen, details) => {
    setOpen(nextOpen);
    // details.reason: 'trigger-press' | 'close-press' | 'escape-key' | 'none'
  }}
>
  {/* ... */}
</Fullscreen.Root>

You can also drive the fullscreen state from a button outside <Fullscreen.Root>. Flipping open to true inside a click handler triggers requestFullscreen() synchronously in the same task as the click, satisfying the spec’s user-activation requirement:

External trigger

const [open, setOpen] = React.useState(false);

<button onClick={() => setOpen(true)}>Open externally</button>
<Fullscreen.Root open={open} onOpenChange={setOpen}>
  <Fullscreen.Container>{/* ... */}</Fullscreen.Container>
</Fullscreen.Root>

If open is set to true outside the browser’s transient-activation window (no recent user gesture, or more than ~5 seconds after one), the browser rejects the request. Base UI catches the rejection, dispatches onOpenChange(false, { reason: 'none' }) so the controlled state can roll back, and logs a warning in development.

Detached triggers

A <Fullscreen.Trigger> can also live anywhere in the React tree — for example in a global toolbar, away from the element that goes fullscreen. Connect them by creating a handle with Fullscreen.createHandle() and passing it to both <Fullscreen.Root> and <Fullscreen.Trigger>:

Detached trigger

const playerFullscreen = Fullscreen.createHandle();

<Fullscreen.Trigger handle={playerFullscreen}>Enter fullscreen</Fullscreen.Trigger>

<Fullscreen.Root handle={playerFullscreen}>
  <Fullscreen.Container>{/* ... */}</Fullscreen.Container>
</Fullscreen.Root>

Camera 01

index.tsx index.module.css theme.css

'use client';
import * as React from 'react';
import { Fullscreen } from '@base-ui/react/fullscreen';
import styles from './index.module.css';

const playerFullscreen = Fullscreen.createHandle();

export default function ExampleFullscreenDetached() {
  return (
    <div className={styles.Layout}>
      <header className={styles.Header}>
        <p className={styles.Label}>
          <span className={styles.LabelDot} aria-hidden="true" />
          Camera 01
        </p>
        <Fullscreen.Trigger className={styles.Trigger} handle={playerFullscreen}>
          <ExpandIcon />
          Enter fullscreen
        </Fullscreen.Trigger>
      </header>

      <Fullscreen.Root handle={playerFullscreen}>
        <Fullscreen.Container className={styles.Container}>
          <Fullscreen.Close className={styles.Close}>
            <CloseIcon />
            Close
          </Fullscreen.Close>
        </Fullscreen.Container>
      </Fullscreen.Root>
    </div>
  );
}

function ExpandIcon(props: React.ComponentProps<'svg'>) {
  return (
    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" {...props}>
      <path d="M2 5V2H5M10 7V10H7M5 10H2V7M7 2H10V5" stroke="currentColor" strokeWidth="1.25" />
    </svg>
  );
}

function CloseIcon(props: React.ComponentProps<'svg'>) {
  return (
    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" {...props}>
      <path d="M3 3L9 9M9 3L3 9" stroke="currentColor" strokeWidth="1.25" />
    </svg>
  );
}

Imperative open and close

The handle returned by Fullscreen.createHandle() also exposes imperative methods. Calling handle.open() from any user-gesture handler (click, keypress, command-palette action, etc.) enters fullscreen the same way a trigger press would:

Imperative control

const playerFullscreen = Fullscreen.createHandle();

function onHotkey(event: KeyboardEvent) {
  if (event.key === 'f') {
    playerFullscreen.open();
  }
}

// `close()` and `isOpen` have no gesture constraints.
playerFullscreen.close();
console.log(playerFullscreen.isOpen);

handle.open() carries the same user-activation requirement as <Fullscreen.Trigger>. If invoked outside the activation window, the browser rejects the request and Base UI dispatches onOpenChange(false, { reason: 'none' }) to roll the state back.

Mount only when open

Wrap the <Fullscreen.Container> in a <Fullscreen.Portal> to keep the fullscreen content out of the DOM until the user enters fullscreen. By default the portal renders into document.body and tears its children down again when the user exits.

Mount only when open

<Fullscreen.Root>
  <Fullscreen.Trigger>Open fullscreen</Fullscreen.Trigger>
  <Fullscreen.Portal>
    <Fullscreen.Container>{/* ... */}</Fullscreen.Container>
  </Fullscreen.Portal>
</Fullscreen.Root>

The user-activation chain is preserved: pressing the trigger flips open, the portal mounts the container synchronously, and requestFullscreen() runs in the same task. Pass keepMounted to keep the children in the DOM even when not in fullscreen — they are hidden via the hidden attribute (matching <Dialog.Portal>) so consumer styles such as width: 100vw don’t leak into the page. Pass container to portal into a custom node.

index.tsx index.module.css theme.css

import * as React from 'react';
import { Fullscreen } from '@base-ui/react/fullscreen';
import styles from './index.module.css';

export default function ExampleFullscreenPortal() {
  return (
    <Fullscreen.Root>
      <Fullscreen.Trigger className={styles.Trigger}>
        <ExpandIcon />
        Open fullscreen
      </Fullscreen.Trigger>
      <Fullscreen.Portal>
        <Fullscreen.Container className={styles.Container}>
          <h2 className={styles.Title}>Mounted only when open</h2>
          <p className={styles.Description}>This content is only mounted while in fullscreen.</p>
          <Fullscreen.Close className={styles.Close}>
            <CloseIcon />
            Close
          </Fullscreen.Close>
        </Fullscreen.Container>
      </Fullscreen.Portal>
    </Fullscreen.Root>
  );
}

function ExpandIcon(props: React.ComponentProps<'svg'>) {
  return (
    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" {...props}>
      <path d="M2 5V2H5M10 7V10H7M5 10H2V7M7 2H10V5" stroke="currentColor" strokeWidth="1.25" />
    </svg>
  );
}

function CloseIcon(props: React.ComponentProps<'svg'>) {
  return (
    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" {...props}>
      <path d="M3 3L9 9M9 3L3 9" stroke="currentColor" strokeWidth="1.25" />
    </svg>
  );
}

Detecting unsupported browsers

The Fullscreen API is unavailable in some environments (notably iOS Safari for iPhone). <Fullscreen.Trigger> handles this for you out of the box — when the API is unsupported it sets disabled, aria-disabled="true", and data-disabled, and silently no-ops on activation. Most apps can ship <Fullscreen.Trigger>Enter fullscreen</Fullscreen.Trigger> as-is.

To render entirely different UI in the unsupported case, branch inside the trigger’s render prop. Spread props on the supported branch (so the trigger’s click handler, ref, and ARIA attributes wire up), and render a plain non-interactive node on the unsupported branch — do not spread props there, otherwise you’ll attach button-like behavior to an element that can’t actually enter fullscreen:

Render alternate UI when unsupported

<Fullscreen.Trigger
  render={(props, state) =>
    state.supported ? (
      <button {...props}>Enter fullscreen</button>
    ) : (
      <span>Fullscreen isn't available on this device</span>
    )
  }
/>

Pass navigationUI to <Fullscreen.Root> to forward the FullscreenOptions.navigationUI hint to requestFullscreen(). The browser is free to honor user preference over this hint.

Prefer maximum screen real estate

<Fullscreen.Root navigationUI="hide">{/* ... */}</Fullscreen.Root>

Fullscreen any element

Sometimes the fullscreen target lives outside the React tree — most commonly the entire page (document.documentElement). Two complementary entry points cover this case:

Pass a target prop to <Fullscreen.Root> for a managed setup that still gives you triggers, closes, controlled state, and data-fullscreen reactivity.
Call Fullscreen.request(element) and Fullscreen.exit() directly from a user-gesture handler for fire-and-forget cases that don’t need state management.

target accepts a callback that returns the element (lazy and SSR-safe) or a React.RefObject pointing at the element. <Fullscreen.Container> cannot be used together with target.

Fullscreen the page with a managed Root

<Fullscreen.Root target={() => document.documentElement}>
  <Fullscreen.Trigger>Fullscreen the page</Fullscreen.Trigger>
</Fullscreen.Root>

index.tsx index.module.css theme.css

'use client';
import * as React from 'react';
import { Fullscreen } from '@base-ui/react/fullscreen';
import styles from './index.module.css';

export default function ExampleFullscreenPage() {
  return (
    <Fullscreen.Root target={getDocumentElement}>
      <Fullscreen.Trigger className={styles.Trigger}>
        <ExpandIcon />
        Fullscreen the page
      </Fullscreen.Trigger>
    </Fullscreen.Root>
  );
}

function getDocumentElement() {
  if (typeof document === 'undefined') {
    return null;
  }
  return document.documentElement;
}

function ExpandIcon(props: React.ComponentProps<'svg'>) {
  return (
    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" {...props}>
      <path d="M2 5V2H5M10 7V10H7M5 10H2V7M7 2H10V5" stroke="currentColor" strokeWidth="1.25" />
    </svg>
  );
}

For one-off cases the imperative utilities are simplest:

Imperative request and exit

import { Fullscreen } from '@base-ui/react/fullscreen';

<button
  type="button"
  onClick={() => {
    Fullscreen.request(document.documentElement).catch(() => {
      // Browser rejected (e.g. no recent user gesture, or unavailable in this iframe).
    });
  }}
>
  Fullscreen the page
</button>;

<button type="button" onClick={() => Fullscreen.exit()}>
  Exit fullscreen
</button>

Like <Fullscreen.Trigger> and handle.open(), Fullscreen.request() must run inside a user-gesture handler. The returned promise rejects if the browser refuses or the API isn’t available on the element’s owner document.

API reference

Root

Groups all parts of the fullscreen. Doesn’t render its own HTML element.

defaultOpenbooleanfalse

Name: defaultOpen
Description: Whether the container is initially displayed in fullscreen.

The Fullscreen API requires a user gesture to enter fullscreen, so an initially open value can only be honored after the user interacts with the page. To render a controlled fullscreen, use the open prop instead.
Type: boolean | undefined
Default: false

openboolean—

Name: open
Description: Whether the container is currently displayed in fullscreen.

To render an uncontrolled fullscreen, use the defaultOpen prop instead.
Type: boolean | undefined

onOpenChangefunction—

Name: onOpenChange
Description: Event handler called when the container enters or exits fullscreen.
Type: | (( open: boolean, eventDetails: Fullscreen.Root.ChangeEventDetails, ) => void) | undefined

handleFullscreen.Handle—

Name: handle
Description: A handle to control the fullscreen imperatively or to associate detached <Fullscreen.Trigger> components with this root. Create one with Fullscreen.createHandle().
Type: Fullscreen.Handle | undefined

navigationUIFullscreenNavigationUI'auto'

Name: navigationUI
Description: Hint to the browser describing how the navigation UI should be presented while the container is in fullscreen. Forwarded to Element.requestFullscreen().
Type: 'auto' | 'show' | 'hide' | undefined
Default: 'auto'

targetFullscreenTarget—

Name: target
Description: An external element to present in fullscreen instead of <Fullscreen.Container>. Useful for fullscreening the entire page (document.documentElement) or a sibling DOM node.

Accepts a callback that returns the element (lazy, SSR-safe) or a React.RefObject pointing at the element.

<Fullscreen.Container> must not be used together with target.
Type: FullscreenTarget | undefined

disabledbooleanfalse

Name: disabled
Description: Whether the component should ignore user interaction.
Type: boolean | undefined
Default: false

childrenReact.ReactNode—

Name: children
Description: The content of the fullscreen.
Type: React.ReactNode | undefined

Fullscreen.Root.PropsHide

Re-Export of Root props as FullscreenRootProps

Fullscreen.Root.StateHide

type FullscreenRootState = {
  /** Whether the container is currently displayed in fullscreen. */
  open: boolean;
  /** Whether the component should ignore user interaction. */
  disabled: boolean;
  /** Whether the browser supports the Fullscreen API for the container's owner document. */
  supported: boolean;
}

Fullscreen.Root.ChangeEventReasonHide

type FullscreenRootChangeEventReason =
  | 'trigger-press'
  | 'close-press'
  | 'escape-key'
  | 'imperative-action'
  | 'none'

Fullscreen.Root.ChangeEventDetailsHide

type FullscreenRootChangeEventDetails = (
  | { reason: 'trigger-press'; event: MouseEvent | PointerEvent | TouchEvent | KeyboardEvent }
  | { reason: 'close-press'; event: MouseEvent | PointerEvent | KeyboardEvent }
  | { reason: 'escape-key'; event: KeyboardEvent }
  | { reason: 'imperative-action'; event: Event }
  | { reason: 'none'; event: Event }
) & {
  /** Cancels Base UI from handling the event. */
  cancel: () => void;
  /** Allows the event to propagate in cases where Base UI will stop the propagation. */
  allowPropagation: () => void;
  /** Indicates whether the event has been canceled. */
  isCanceled: boolean;
  /** Indicates whether the event is allowed to propagate. */
  isPropagationAllowed: boolean;
  /** The element that triggered the event, if applicable. */
  trigger: Element | undefined;
}

Fullscreen.Root.NavigationUIHide

type FullscreenRootNavigationUI = 'auto' | 'show' | 'hide'

Fullscreen.Root.TargetHide

type FullscreenRootTarget = (() => Element | null | undefined) | React.RefObject<Element | null>

Trigger

A button that toggles the fullscreen state of the container. Renders a <button> element.

handleFullscreen.Handle—

Name: handle
Description: A handle to associate the trigger with a fullscreen root rendered elsewhere in the tree. Create one with Fullscreen.createHandle().
Type: Fullscreen.Handle | undefined

nativeButtonbooleantrue

Name: nativeButton
Description: Whether the component renders a native <button> element when replacing it via the render prop. Set to false if the rendered element is not a button (for example, <div>).
Type: boolean | undefined
Default: true

idstring—

Name: id
Description: ID of the trigger. Forwarded to the rendered element and used internally to identify which trigger activated the fullscreen.
Type: string | undefined

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | (( state: Fullscreen.Trigger.State, ) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: Fullscreen.Trigger.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: Fullscreen.Trigger.State, ) => ReactElement) | undefined

data-fullscreen

Present when the container is currently displayed in fullscreen.

data-not-fullscreen

Present when the container is not currently displayed in fullscreen.

Attribute	Description	-
`data-fullscreen`	Present when the container is currently displayed in fullscreen.
`data-not-fullscreen`	Present when the container is not currently displayed in fullscreen.

Fullscreen.Trigger.PropsHide

Re-Export of Trigger props as FullscreenTriggerProps

Fullscreen.Trigger.StateHide

type FullscreenTriggerState = {
  /** Whether the container is currently displayed in fullscreen. */
  open: boolean;
  /** Whether the component should ignore user interaction. */
  disabled: boolean;
  /** Whether the browser supports the Fullscreen API for the container's owner document. */
  supported: boolean;
}

Container

The element that is presented in fullscreen. Renders a <div> element.

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | (( state: Fullscreen.Container.State, ) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: Fullscreen.Container.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: Fullscreen.Container.State, ) => ReactElement) | undefined

data-fullscreen

Present when the container is currently displayed in fullscreen.

data-not-fullscreen

Present when the container is not currently displayed in fullscreen.

Attribute	Description	-
`data-fullscreen`	Present when the container is currently displayed in fullscreen.
`data-not-fullscreen`	Present when the container is not currently displayed in fullscreen.

Fullscreen.Container.PropsHide

Re-Export of Container props as FullscreenContainerProps

Fullscreen.Container.StateHide

type FullscreenContainerState = {
  /** Whether the container is currently displayed in fullscreen. */
  open: boolean;
  /** Whether the component should ignore user interaction. */
  disabled: boolean;
  /** Whether the browser supports the Fullscreen API for the container's owner document. */
  supported: boolean;
}

Close

A button that exits the fullscreen container. Renders a <button> element.

nativeButtonbooleantrue

Name: nativeButton
Description: Whether the component renders a native <button> element when replacing it via the render prop. Set to false if the rendered element is not a button (for example, <div>).
Type: boolean | undefined
Default: true

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: Fullscreen.Close.State) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: Fullscreen.Close.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: Fullscreen.Close.State, ) => ReactElement) | undefined

data-fullscreen

Present when the container is currently displayed in fullscreen.

data-not-fullscreen

Present when the container is not currently displayed in fullscreen.

Attribute	Description	-
`data-fullscreen`	Present when the container is currently displayed in fullscreen.
`data-not-fullscreen`	Present when the container is not currently displayed in fullscreen.

Fullscreen.Close.PropsHide

Re-Export of Close props as FullscreenCloseProps

Fullscreen.Close.StateHide

type FullscreenCloseState = {
  /** Whether the container is currently displayed in fullscreen. */
  open: boolean;
  /** Whether the component should ignore user interaction. */
  disabled: boolean;
  /** Whether the browser supports the Fullscreen API for the container's owner document. */
  supported: boolean;
}

Portal

A portal that mounts its children outside the regular React tree (by default into <body>) only while the container is in fullscreen.

Useful for “dialog-like” fullscreen UI: the trigger lives in the regular page, and the fullscreen content is absent from the DOM until the user enters fullscreen.

Doesn’t render its own HTML element.

containerFullscreen.Portal.Container—

Name: container
Description: The element to portal into. Defaults to document.body.
Type: Fullscreen.Portal.Container | undefined

childrenReact.ReactNode—

Name: children
Description: The content of the portal.
Type: React.ReactNode | undefined

keepMountedbooleanfalse

Name: keepMounted
Description: Whether to keep the contents mounted in the DOM while the container is not in fullscreen.
Type: boolean | undefined
Default: false

Fullscreen.Portal.PropsHide

Re-Export of Portal props as FullscreenPortalProps

Fullscreen.Portal.ContainerHide

type FullscreenPortalContainer =
  | Element
  | DocumentFragment
  | React.RefObject<Element | DocumentFragment | null>
  | (() => Element | DocumentFragment | null)
  | null

Handle

A handle to control a Fullscreen imperatively and to associate detached triggers with it.

Pass the handle to <Fullscreen.Root handle={...}> and to any detached <Fullscreen.Trigger handle={...}> rendered outside the root. Calling open() from a user-gesture handler enters fullscreen the same way a trigger press would.

Constructor parameters

storeFullscreenStore—

Name: store
Type: FullscreenStore | undefined

Properties

isOpen

boolean

readonly

Name: isOpen
Description: Indicates whether the container is currently in fullscreen.
Type: boolean
Modifiers: readonly

Methods

open(triggerId?)

void

Name: open
Description: Enters fullscreen and associates the change with the trigger with the given id, if provided.

requestFullscreen() requires the document to have transient activation, so this method must be called from within a user-gesture event handler (click, keydown, etc.) or from a task that still inherits a recent activation. Calls outside that window will be rejected by the browser; the rejection is caught and reverts state via onOpenChange(false, { reason: 'none' }).
Parameters: triggerId?—
string | null | undefined
ID of the trigger to associate with the change. If null or omitted, the change is dispatched without an associated trigger.
Returns: void

close()

void

Name: close
Description: Exits fullscreen.

Unlike open(), exiting fullscreen does not require a user gesture and can be called at any time.
Returns: void