Document Picture-In-Picture Component For React

A feature-packed and optimized React component for Chrome’s new Document Picture-in-Picture API.

How to use it:

1. Install and import the ReactDocumentPictureInPicture component.

$ npm install react-document-picture-in-picture
import ReactDocumentPictureInPicture from "react-document-picture-in-picture";

2. In your React component…

    ({ open, close, toggle, isOpen }) => 
        <b>Is {isOpen ? 'Open' : 'Closed'}</b>
        <button onClick={open}>Open</button>
        <button onClick={close}>Close</button>
        <button onClick={toggle}>Toggle</button>
    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

3. Available component props.

width?: string | number;
height?: string | number;
shareStyles?: boolean;
onOpen?: () => void;
onClose?: () => void;
onResize?: (width: number, height: number) => void;
featureUnavailableRenderer?: ReactNode | ((reason: FeatureUnavailableReasonEnum) => ReactNode);
buttonRenderer?: ReactNode | ((props: { open: () => void, close: () => void, toggle: () => void, isOpen: boolean }) => ReactNode);
children?: ReactNode;


Document Picture-In-Picture Component For React

Download Details:

Author: martinshaw

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website:

License: MIT

Add Comment