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