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:
