https://github.com/ambar/react-pip

https://github.com/ambar/react-pip

Last synced: 5 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/ambar/react-pip
• Owner: ambar
• Created: 2023-11-05T05:18:04.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-11-25T12:27:44.000Z (7 months ago)
• Last Synced: 2024-12-25T15:47:56.268Z (6 months ago)
• Language: TypeScript
• Homepage: https://stackblitz.com/~/github.com/ambar/react-pip
• Size: 668 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# react-pip (Picture in Picture)

Use [Document Picture-in-Picture](https://developer.mozilla.org/en-US/docs/Web/API/DocumentPictureInPicture/requestWindow) API to create an always-on-top window.

Demos:

- Example: https://5g52r4-5173.csb.app/

  ![screenshot-1.png](./screenshot-1.png)

- Live Caption Overlay: https://xyyyj4.csb.app/

  ![screenshot-2.png](./screenshot-2.png)

## Usage

```tsx

import {PIPPortal} from 'react-pip'

function Demo() {

  const [isOpen, setIsOpen] = useState(false)

  return (

    <>

       setIsOpen(!isOpen)}>Toggle PIP Window

      {isOpen && (

         setIsOpen(false)}>

          Content

        

      )}

    >

  )

}

```

## Types

```ts

export type PIPPortalProps = {

  width?: number

  height?: number

  disallowReturnToOpener?: boolean

  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](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh

- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh