@ni2khanna/plyr-react

A simple HTML5, YouTube and Vimeo player for react using plyr

Usage no npm install needed!

<script type="module">
  import ni2khannaPlyrReact from 'https://cdn.skypack.dev/@ni2khanna/plyr-react';
</script>

README

plyr-react

All Contributors

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

Gitpod Ready-to-Code npm BCH compliance Size

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.