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={
        {
          /* ... */
        }
      }
    />
  )
}

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.current = player)} />
      </>
    )
  }
}

// Functional component

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

Example

You can fork this example https://stackblitz.com/edit/react-fpmwns?file=src/App.js Demo https://react-fpmwns.stackblitz.io

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.