Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-use-pip

DawChihLiou1.3kMIT1.5.0TypeScript support: included

React hook for Picture in Picture

react-use-pip, react, hooks, typescript, picture-in-picture

readme

react-use-pip

npm semantic-release Package size License npm downloads

react-use-pip

React Hook for Picture in Picture.

Picture in Picture is a on going W3C draft so that websites to create a floating window to continue playing media while users interact with other content or sites. Before shipping your application with the feature, please be aware that the feature API is not widely supported yet across browsers and the implementation status can be found here. Please also see Can I Use for more information.

Features

  • Lightweight and easy to use.
  • Picture in picture browser support detection.
  • TypeScript friendly. react-use-pip hook is written in TypeScript.
  • Picture in Picture mode control with your own custom Event handlers.

Support

  • react-use-pip supports React versions from 16.9.0 up. It also supports React 17 and React 18.

Install

In your project directory, run

npm install --save react-use-pip

Or with Yarn

yarn add react-use-pip

Quick Start

import usePictureInPicture from 'react-use-pip'

function VideoPlayer() {
  const videoRef = useRef(null)
  const {
    isPictureInPictureActive,
    isPictureInPictureAvailable,
    togglePictureInPicture,
  } = usePictureInPicture(videoRef)

  return (
    <div className="App">
      <video ref={videoRef} autoPlay muted controls loop width="100%">
        <source src="video-sample.mp4" />
      </video>
      {isPictureInPictureAvailable && (
        <button
          onClick={() => togglePictureInPicture(!isPictureInPictureActive)}
        >
          {isPictureInPictureActive ? 'Disable' : 'Enable'} Picture in Picture
        </button>
      )}
    </div>
  )
}

API

const {
  isPictureInPictureActive,
  isPictureInPictureAvailable,
  togglePictureInPicture,
} = usePictureInPicture(videoRef, options)

Parameters

  • videoRef: Ref to pass in to video element as a prop
  • options: (optional) an object that provides the hook a set of callback functions.

Return Values

  • isPictureInPictureActive = false: boolean that signals whether picture in picture mode is active or inactive
  • isPictureInPictureAvailable: boolean that signals whether picture in picture mode is supported and enabled
  • togglePictureInPicture(isActive: boolean) => void: function that provide you toggle picture in picture mode

Options (Optional)

  • onEnterPictureInPicture(event: Event) => void: (optional) callback function when entering picture in picture mode
  • onLeavePictureInPicture(event: Event) => void: (optional) callback function when leaving picture in picture mode
  • onRequestPictureInPictureError(error: any) => void: (optional) callback function when there is an error requesting picture in picture
  • onExitPictureInPictureError(error: any) => void: (optional) callback function when there is an error exiting picture in picture

License

MIT © DawChihLiou

changelog

1.5.0 (2021-10-22)

Features

1.4.1 (2020-09-03)

Bug Fixes

  • ci.yml: remove duplicated npm publish in release config (830c23c)

1.4.0 (2020-09-03)

Features

  • types.ts: more comprehensive typings (ab02935)

1.3.1 (2020-09-01)

Bug Fixes

1.3.0 (2020-08-31)

Features

  • types.ts: add picture in picture event type (a373ed3)

1.2.0 (2020-08-30)

Features

  • index: add isPictureInPictureAvailable in return object (4c6f3c7)

1.1.0 (2020-08-30)

Features

  • index.ts: add webkit support (961c3ee)

1.0.2 (2020-08-30)

Bug Fixes

  • app.tsx: fix public url (964b4d5)

1.0.1 (2020-08-30)

Bug Fixes

  • app.tsx: fix public url (9ae6287)

1.0.0 (2020-08-29)

Bug Fixes

  • ci.yml: add npm token (93a796c)
  • ci.yml: configure release plugins (176fd99)
  • ci.yml: fix ci (5b14b78)
  • ci.yml: install packages and try to fix workflow (8d7498c)
  • ci.yml: resolve merge conflict (44cd028)
  • package.json: add publish config (aab7ebf)
  • release.config.js: add release branch (a903944)

Features