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/

- Live Caption Overlay: https://xyyyj4.csb.app/
## 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