react-document-picture-in-picture
v1.2.2
Published
Feature-packed and optimised React component for Chrome's new Document Picture-in-Picture API
Downloads
154
Maintainers
Readme
react-document-picture-in-picture
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.
Support
If you find this package or any of my other open-source packages useful for your projects, please send me a dollar, quid or dinar to help me continue to maintain and develop them.
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.