useFullscreen

Hook to handle fullscreen events

browser

test coverage

Last changed: last month

Installation

Library

CLI

Manual

import { useFullscreen } from '@siberiacancode/reactuse';

Usage

const { enter, exit, toggle, value } = useFullscreen(ref);
// or
const { ref, enter, exit, toggle, value } = useFullscreen();

Demo

source

Api

Parameters

Name	Type	Default	Note
target	HookTarget	-	The target element for fullscreen
options.initialValue?	boolean	false	initial value of fullscreen
options.onEnter?	() => void	-	on enter fullscreen
options.onExit?	() => void	-	on exit fullscreen

Returns

UseFullScreenReturn

Parameters

Name	Type	Default	Note
options.initialValue?	boolean	false	initial value of fullscreen
options.onEnter?	() => void	-	on enter fullscreen
options.onExit?	() => void	-	on exit fullscreen

Returns

UseFullScreenReturn & { ref: RefObject<Target> }

Type declaration

import type { HookTarget } from '@/utils/helpers';

import type { StateRef } from '../useRefState/useRefState';

export interface UseFullScreenOptions {
  /** initial value */
  initialValue?: boolean;
  /** on enter fullscreen */
  onEnter?: () => void;
  /** on exit fullscreen */
  onExit?: () => void;
}

export interface UseFullScreenReturn {
  /** The fullscreen state */
  value: boolean;
  /** The fullscreen enter method */
  enter: () => void;
  /** The fullscreen exit method */
  exit: () => void;
  /** The fullscreen toggle method */
  toggle: () => void;
}

export interface UseFullScreen {
  (target: HookTarget, options?: UseFullScreenOptions): UseFullScreenReturn;

  <Target extends Element>(
    options?: UseFullScreenOptions,
    target?: never
  ): UseFullScreenReturn & { ref: StateRef<Target> };
}

Source

Source • Demo

Contributors

D

debabin

H

hywax