plyr-react

Installation

This plugin requires minimum Node.js with npm or yarn.

# with npm
npm i plyr-react

# with yarn
yarn add plyr-react

Usage

import Plyr from 'plyr-react'
import 'plyr-react/dist/plyr.css'

export default function App() {
  return (
    <Plyr
      source={
        {
          /* ... */
        }
      }
      options={
        {
          /* ... */
        }
      }
    />
  )
}

Note: You will need mark source as a type of any until a new release of Plyr is available.

Using ref

// Component class
class MyComponent extends Component {
  constructor(props) {
    super(props)
    this.player = createRef()
  }

  componentDidMount() {
    // Access the internal plyr instance
    console.log(this.player.current.plyr)
  }

  render() {
    return (
      <>
        <Plyr ref={(player) => (this.player = player)} />
      </>
    )
  }
}

// Functional component

const MyComponent = () => {
  const ref = useRef()
  useEffect(() => console.log(ref.current.plyr))
  return (
    <>
      <Plyr ref={ref} />
    </>
  )
}

Example

Click here to see example and you can play with this example.

Contribute

Support

If you like the project and want to support my work, give star or fork it.

Thanks

• @iwatakeshi For provide help for convert to typescript.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

mnervik 🐛

Takeshi 🤔 💬 🌍 📓 💡 🐛

This project follows the all-contributors specification. Contributions of any kind welcome!