useFullscreen

Hook to handle fullscreen events

browser

low

test coverage

Last changed: 16 days ago

TIP

This hook uses Fullscreen browser api to provide enhanced functionality. Make sure to check for compatibility with different browsers when using this api

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