agneym / usePip

A custom react hook for triggering Picture in Picture functionality

usePip

A custom React hook to use Picture in Picture mode in supported browsers.

Demo

Installation

npm install use-pip

Feel free to replace with yarn counterparts.

Usage:

const { loading, error, toggle } = usePip(videoRef);

See example directory for complete code.

Parameters:

Parameter	description	required?	default
videoRef	Ref for the video element	true	null

Return:

Name	Type	Description
loading	boolean	Manages loading time for setting for detecting support
error	string	Error state as described by spec. Holds value NotSupportedError if browser or video does not support attribute.
toggle	function	toggles state of PiP in document

Contributing

1. Install dependencies

npm install

2. Run dev for lib

npm run dev

3. Run demo

npm start