Document Picture-In-Picture Component For React

Description:

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
$ npm install react-document-picture-in-picture
import ReactDocumentPictureInPicture from "react-document-picture-in-picture";

2. In 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>

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;

Preview:

Document Picture-In-Picture Component For React

Add Comment