Plyr react hook.js

import {useEffect} from 'react'
import Plyr, {SourceInfo, Options} from 'plyr'

import 'plyr/dist/plyr.css'

const usePlyr = (id: string, sources: SourceInfo, opts?: Options) => {
  useEffect(() => {
    const el = document.getElementById(id)
    const player = new Plyr(el, opts)
    player.source = sources

    return () => player.destroy()
  }, [sources, opts])
}

export default usePlyr


// use
const MediaBlock = () => {
  const sources = {
    type: 'video',
    sources: [{src: sourceUrl}]
  }

  usePlyr('plyr', sources, options)
  
  render = (
    <Container>
      <video id='plyr' />
    </Container>
  )
}