React Component for Document Picture-in-Picture API

Easily and quickly use Chrome's new experimental Document Picture-in-Picture API as a zero-dependency React component.

Installation

npm install react-document-picture-in-picture

Installs the component package from this monorepo project.

Usage

import ReactDocumentPictureInPicture from "react-document-picture-in-picture";

// Inside your React component ...
<ReactDocumentPictureInPicture
    buttonRenderer={
        ({ open, close, toggle, isOpen }) => 
            <div>
                <b>Is {isOpen ? 'Open' : 'Closed'}</b>
                <button onClick={open}>Open</button>
                <button onClick={close}>Close</button>
                <button onClick={toggle}>Toggle</button>
            </div>
    }
    onOpen={() => console.log('Opened')}
    onClose={() => console.log('Closed')}
    onResize={(w, h) => console.log('Resized to ' + w + 'x' + h)}
>
    This text should be displayed in a Document Picture in Picture in the bottom right of the original window
</ReactDocumentPictureInPicture>

There are at least three useful examples demonstrating how to use event props, the ref prop and size props in the examples package of this monorepo.

To quickly take a look at the examples, click here https://martinshaw.github.io/react-document-picture-in-picture/packages/examples/dist/.

Or you can build the examples site yourself:

  • Clone the repository
  • Install PNPM
  • Finally, run the following commands:
pnpm install 
pnpm run --filter react-document-picture-in-picture build
pnpm run --filter examples start

The examples will be available at https://localhost:1234/ in your browser.


View on GitHub: https://github.com/martinshaw/react-document-picture-in-picture 

#react 

React Component for Document Picture-in-Picture API
1.05 GEEK