react-pip (Picture in Picture)
Use Document Picture-in-Picture API to create an always-on-top window.
Demos:
- Example: https://5g52r4-5173.csb.app/
- Live Caption Overlay: https://xyyyj4.csb.app/
Usage
import {PIPPortal} from 'react-pip'
function Demo() {
const [isOpen, setIsOpen] = useState(false)
return (
<>
<button onClick={() => setIsOpen(!isOpen)}>Toggle PIP Window</button>
{isOpen && (
<PIPPortal width={400} height={200} onClose={() => setIsOpen(false)}>
Content
</PIPPortal>
)}
</>
)
}Types
export type PIPPortalProps = {
width?: number
height?: number
children: React.ReactNode
onClose?: () => void
}Development
React + TypeScript + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh