useFullscreen

Overview

manages DOM full screen.

Documentation and Examples

Installation

pnpm dlx shadcn@latest add https://shadcn-ahooks.vercel.app/r/useFullscreen.json

npx shadcn@latest add https://shadcn-ahooks.vercel.app/r/useFullscreen.json

yarn shadcn@latest add https://shadcn-ahooks.vercel.app/r/useFullscreen.json

bun shadcn@latest add https://shadcn-ahooks.vercel.app/r/useFullscreen.json

manages DOM full screen.

Examples

Default usage

Image full screen

Page full screen

Coexist with other full screen operations

API

const [isFullscreen, {
  enterFullscreen,
  exitFullscreen,
  toggleFullscreen,
  isEnabled,
}] = useFullScreen(
  target,
  options?: Options
);

Params

| Property | Description | Type | Default | | -- | | -- | | - | | onExit | Exit full screen trigger | () => void | - | | onEnter | Enter full screen trigger | () => void | - | | pageFullscreen | Whether to enable full screen of page. If its type is object, it can set className and z-index of the full screen element | boolean | { className?: string, zIndex?: number } | false |

Result

| Property | Description | Type | | --- | | isFullscreen | Is full screen | boolean | | enterFullscreen | Enter full screen | () => void | | exitFullscreen | Exit full screen | () => void | | toggleFullscreen | Toggle full screen | () => void | | isEnabled | Is enable screenfull | boolean |