Create account

DEV Community

Chintan prajapati

Posted on Sep 25, 2020

plyr-react

#showdev #react #typescript

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

chintan9 / plyr-react

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

Plyr React

A responsive media player that is simple, easy to use, and customizable for video, audio, YouTube, and Vimeo

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

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} />
}