https://github.com/agneym/usepip
A custom react hook for triggering Picture in Picture functionality
https://github.com/agneym/usepip
hooks picture-in-picture react
Last synced: 6 months ago
JSON representation
A custom react hook for triggering Picture in Picture functionality
- Host: GitHub
- URL: https://github.com/agneym/usepip
- Owner: agneym
- License: mit
- Created: 2019-06-02T18:54:07.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-09-11T21:24:44.000Z (about 1 year ago)
- Last Synced: 2024-09-24T04:38:25.230Z (about 1 year ago)
- Topics: hooks, picture-in-picture, react
- Language: JavaScript
- Homepage: https://agneym.github.io/usePip/
- Size: 41 MB
- Stars: 3
- Watchers: 3
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# usePip
A custom React hook to use [Picture in Picture](https://wicg.github.io/picture-in-picture/) mode in [supported browsers](https://caniuse.com/#feat=picture-in-picture).
[Demo](https://agneym.github.io/usePip/)
## Installation
```bash
npm install use-pip
```
Feel free to replace with yarn counterparts.
## Usage:
```javascript
const { loading, error, toggle } = usePip(videoRef);
```
See example directory for complete code.
### Parameters:
| Parameter | description | required? | default |
| :-------: | :-----------------------: | :-------: | :-----: |
| videoRef | Ref for the video element | true | null |
### Return:
| Name | Type | Description |
| :-----: | :---------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| loading | boolean | Manages loading time for setting for detecting support |
| error | string | Error state as described by [spec](https://wicg.github.io/picture-in-picture/). Holds value `NotSupportedError` if browser or video does not support attribute. |
| toggle | function | toggles state of PiP in document |
## Contributing
1. Install dependencies
```
npm install
```
2. Run dev for lib
```
npm run dev
```
3. Run demo
```
npm start
```