useFullscreen

Controls fullscreen mode for a specific target element.

Import

import { useFullscreen } from '@kamod-ch/hooks'

Live demo

Basic demo

Controls fullscreen mode for a specific target element.

Browser-only demo

This demo starts after the page mounts in the browser.

import { useRef } from 'preact/hooks'
import { useFullscreen } from '@kamod-ch/hooks'

export default function UseFullscreenDemo() {
  const ref = useRef<HTMLDivElement>(null)
  const [isFullscreen, actions] = useFullscreen(ref)

  return (
    <div>
      <div ref={ref} class="demo-target-box demo-large-box">Fullscreen target</div>
      <p><strong>Fullscreen:</strong> {String(isFullscreen)} · <strong>Supported:</strong> {String(actions.isEnabled)}</p>
      <div class="demo-actions">
        <button type="button" onClick={actions.enterFullscreen}>Enter</button>
        <button type="button" onClick={actions.exitFullscreen}>Exit</button>
      </div>
    </div>
  )
}

API

TypeScript signature

import type { BasicTarget } from '../utils/domTarget.js';
export interface PageFullscreenOptions {
    className?: string;
    zIndex?: number;
}
export interface Options {
    onExit?: () => void;
    onEnter?: () => void;
    pageFullscreen?: boolean | PageFullscreenOptions;
}
declare const useFullscreen: (target: BasicTarget, options?: Options) => readonly [boolean, {
    readonly enterFullscreen: (this: unknown) => void;
    readonly exitFullscreen: (this: unknown) => void;
    readonly toggleFullscreen: (this: unknown) => void;
    readonly isEnabled: boolean;
}];
export default useFullscreen;
/

SSR considerations

This hook touches browser APIs. Render it after mount or guard it with BrowserOnly in SSR and static builds.

Browser compatibility

Requires the corresponding browser API to exist in the current environment.