useDocumentPIP

See: (Document-Picture-in-Picture API).

Demo

INFO

The component uses useDocumentPIP hook to show in a separate window the counter showed renderes by the component.

Loading demo…

Show source code

import { useCallback, useState } from "react";
import { useDocumentPIP } from "../../../..";

export const UseDocumentPIP = () => {
	const [show, setShow] = useState(true);
	const [c, setC] = useState(0);
	const { isSupported, openPIP, PipWindow, closePIP } = useDocumentPIP({
		onOpened: useCallback(() => setShow(false), []),
		onClose: useCallback(() => setShow(true), [])
	});

	return <div>
		<p>Window Counter</p>
		<button onClick={() => setC(c => c + 1)}>{c}</button>
		<p>Supported: {isSupported ? 'Yes' : 'No'}</p>
		{
			show &&
			<>
				<div>
					<button
						onClick={() => openPIP({
							inheritCSS: true
						})}
					>
						Open PIP
					</button>
				</div>
			</>
		}
		<PipWindow>
			<div style={{display: 'flex', flexDirection: "column", alignItems: "center", width: "100%", gap: 20}}>
				<h4 style={{textAlign: "center"}}>PIP Window Counter</h4>
				<button onClick={() => setC(c => c + 1)}>{c}</button>
				<button onClick={closePIP}>Close</button>
			</div>
		</PipWindow>
	</div>
}

Types

DocumentPictureInPictureEvent

Event fired when the Document Picture-in-Picture window is successfully opened.

Property	Type	Required	Description
window	Window	✓

DocumentPIPOptions

Configuration options for the Document Picture-in-Picture window.

Property	Type	Required	Description
window	{ width: number; height: number; }		Initial dimensions for the PiP window.
inheritCSS	boolean		If true, clones the parent document's stylesheets into the PiP window. Useful for maintaining consistent UI styling.

UseDocumentPIPProps

Props accepted by useDocumentPIP.

Property	Type	Required	Description
options	DocumentPIPOptions		Default options to apply when opening the PiP window.
onOpen	() => void		Callback triggered immediately when the opening process starts.
onOpened	(evt: DocumentPictureInPictureEvent) => void		Callback triggered once the PiP window is open and the document is available.
onClose	(evt: PageTransitionEvent) => void		Callback triggered when the PiP window is closed.
onError	(err: unknown) => void		Callback triggered if the PiP request fails (e.g., user denial or unsupported environment).

UseDocumentPIPResult

Result returned by useDocumentPIP.

Property	Type	Required	Description
isSupported	boolean	✓	Indicates if the Document Picture-in-Picture API is supported by the current browser.
openPIP	(opts?: DocumentPIPOptions) => Promise<void>	✓	Opens the PiP window.
closePIP	() => void	✓	Manually closes the active PiP window.
window	Window		The current PiP window instance, or undefined if no window is active.
PipWindow	(props: PropsWithChildren) => JSX.Element \| null	✓	A React component that renders its children inside the PiP window using a Portal. Returns null if the PiP window is not currently open.