Shadcn Hooks

useFullscreen

A hook to manage fullscreen state

Loading...

Installation

npx shadcn@latest add @shadcnhooks/use-fullscreen

API

export interface UseFullscreenOptions {
  /**
   * Automatically exit fullscreen when component is unmounted
   *
   * @default false
   */
  autoExit?: boolean
}

/**
 * A hook to manage fullscreen state
 * @param target - The target element to make fullscreen. If not provided, uses document.documentElement
 * @param options - Configuration options
 */
export function useFullscreen(
  target?: BasicTarget<HTMLElement | Element>,
  options?: UseFullscreenOptions,
): {
  isSupported: boolean
  isFullscreen: boolean
  enter: PickFunction<() => Promise<void>>
  exit: PickFunction<() => Promise<void>>
  toggle: PickFunction<() => Promise<void>>
}

Credits

Last updated on

On this page