usePictureInPicture

Hook that provides Picture-in-Picture functionality for video elements

browser

low

test coverage

Last changed: 2 months ago

TIP

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

Installation

Library

CLI

Manual

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

Usage

const { open, supported, enter, exit, toggle } = usePictureInPicture(videoRef);
// or
const { ref, open, supported, enter, exit, toggle } = usePictureInPicture();

Demo

source

Api

Parameters

Name	Type	Default	Note
target	HookTarget	-	The target video element
options.onEnter?	() => void	-	Callback when Picture-in-Picture mode is entered
options.onExit?	() => void	-	Callback when Picture-in-Picture mode is exited

Returns

UsePictureInPictureReturn

Parameters

Name	Type	Default	Note
options.onEnter?	() => void	-	Callback when Picture-in-Picture mode is entered
options.onExit?	() => void	-	Callback when Picture-in-Picture mode is exited

Returns

UsePictureInPictureReturn & { ref: StateRef<HTMLVideoElement> }

Type declaration

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

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

export interface UsePictureInPictureOptions {
  /** The callback when Picture-in-Picture mode is entered */
  onEnter?: () => void;
  /** The callback when Picture-in-Picture mode is exited */
  onExit?: () => void;
}

export interface UsePictureInPictureReturn {
  /** Whether Picture-in-Picture mode is currently active */
  open: boolean;
  /** Whether Picture-in-Picture mode is supported by the browser */
  supported: boolean;
  /** Request to enter Picture-in-Picture mode */
  enter: () => Promise<void>;
  /** Request to exit Picture-in-Picture mode */
  exit: () => Promise<void>;
  /** Toggle Picture-in-Picture mode */
  toggle: () => Promise<void>;
}

export interface UsePictureInPicture {
  (target: HookTarget, options?: UsePictureInPictureOptions): UsePictureInPictureReturn;

  (options?: UsePictureInPictureOptions): UsePictureInPictureReturn & {
    ref: StateRef<HTMLVideoElement>;
  };
}

Source

Source • Demo

Contributors

D

debabin