react-pip
TypeScript icon, indicating that this package has built-in type declarations

1.1.0 • Public • Published

react-pip (Picture in Picture)

Use Document Picture-in-Picture API to create an always-on-top window.

Demos:

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:

Readme

Keywords

Package Sidebar

Install

npm i react-pip

Weekly Downloads

10

Version

1.1.0

License

MIT

Unpacked Size

12.8 kB

Total Files

10

Last publish

Collaborators

  • ambarli