JSPM

  • Created
  • Published
  • Downloads 28077
  • Score
    100M100P100Q144038F
  • License MIT

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

Package Exports

  • plyr-react

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (plyr-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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.