DEV Community

Chintan prajapati
Chintan prajapati

Posted on

plyr-react

Release new version of plyr-react@3 with typescript.

Here you can see in action.

https://stackblitz.com/edit/react-r8vmzh?embed=1&file=src/App.js&hideExplorer=1&hideNavigation=1&view=preview

GitHub logo chintan9 / plyr-react

A simple, accessible and customisable react media player for Video, Audio, YouTube and Vimeo

Plyr React

plyr-react logo

A responsive media player that is simple, easy to use, and customizable for video, audio, YouTube, and Vimeo
tree-shakeable side-effect free

License Version Downloads

You can see a live demo here.

Make sure to select the version for the plyr-react in the dependencies.

Installation

# NPM
npm install plyr-react

# Yarn
yarn add plyr-react
Enter fullscreen mode Exit fullscreen mode

Usage

Ready to use <Plyr /> component

The simplest form of react integration with the plyr is to use the <Plyr /> component, it is best for the static videos.

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 <Plyr {...plyrProps} />
}
Enter fullscreen mode Exit fullscreen mode
Old version 4 plyr-react - The path for an import of css styles has been changed in version 5, if you are using

Top comments (0)