Plyr React
A responsive media player that is simple, easy to use, and customizable for video, audio, YouTube, and Vimeo.
You can see a live demo [here](https://githubbox.com/chintan9/plyr-react/tree/master/example/react).
> Make sure to select the version for the plyr-react in the dependencies.
## Installation
```bash
# NPM
npm install plyr-react
# Yarn
yarn add plyr-react
```
## Usage
### Ready to use `` component
The simplest form of react integration with the plyr is to use the `` component, it is best for the static
videos.
```tsx
import Plyr from "plyr-react"
import "plyr-react/plyr.css"
const plyrProps = {
source: undefined, // https://github.com/sampotts/plyr#the-source-setter
options: undefined, // https://github.com/sampotts/plyr#options
// Direct props for inner video tag (mdn.io/video)
}
function MyPlyrVideo() {
return
}
```
Old version 4 plyr-react
- The path for an import of css styles has been changed in version 5, if you are using the version 4, apply following change in the above code
```diff
- import "plyr-react/plyr.css"
+ import "plyr-react/dist/plyr.css"
```
### Ready to use `usePlyr` hook
If you need the full control over all if possible integration one can imagine, usePlyr is your hook. Here is a simple
and exact Plyr component made with the `usePlyr` hook. Are curios about how it works follow
this [thread](https://github.com/chintan9/plyr-react/issues/732#issuecomment-1029714462) and
this [proposal](https://github.com/chintan9/plyr-react/issues/678#issue-1043113412).
```jsx
const Plyr = React.forwardRef((props, ref) => {
const { source, options = null, ...rest } = props
const raptorRef = usePlyr(ref, {
source,
options,
})
return
})
```
### Accessing the plyr instance using refs
```tsx
// Function base component
const MyComponent = () => {
const ref = useRef()
useEffect(() => {
console.log("internal plyr instance:", ref.current.plyr)
})
return
}
// Class base component
class MyComponent extends Component {
constructor(props) {
super(props)
this.player = createRef()
}
componentDidMount() {
console.log("internal plyr instance", this.player.current.plyr)
}
render() {
return (this.player.current = player)} />
}
}
```
## API:
Currently the exported APIs contains a latest instance of plyr.
In other words, the passing ref will have access to the player in the structure shown below.
```jsx
return
// ref can get access to latest plyr instance with `ref.current.plyr`
ref = { current: { plyr } }
// so you can make your player fullscreen 🎉
ref.current.plyr.fullscreen.enter()
```
## Example
> You can fork these examples
**Javascript
example:**
**Typescript
example:**
**Basic HLS
integration**
Codesandbox
> Check out the examples directory for the useHls integration guide.
```jsx
```
**Demo:** https://react-fpmwns.stackblitz.io
## Nightly version of plyr-react:
## Contribute
We are open to all new contribution, feel free to
read [CONTRIBUTING](https://github.com/chintan9/plyr-react/blob/master/CONTRIBUTING.md)
and [CODE OF CONDUCT](https://github.com/chintan9/plyr-react/blob/master/CODE_OF_CONDUCT.md) section, make new issue to
discuss about the problem
[](https://gitter.im/plyr-react/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge), and improve/fix/enhance the source code with your PRs. There is a ready to code Gitpod, you
can jump into it
from 
## Support
If you like the project and want to support my work, give star ⭐ or fork it.
[](https://openbase.com/js/plyr-react?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge)
## Thanks
- [@realamirhe](https://github.com/realamirhe) For provide help for integrate to react-aptor.
- [@iwatakeshi](https://github.com/iwatakeshi) For provide help for convert to typescript.