react-yt

A full-fledged wrapper for the Youtube Player API created with the render props pattern.

Example

https://btmpl.github.io/react-yt/

Features

• playback of single video or supported lists (playlist, user uploads, search results),
• full access to the Youtube Player API inside the render prop,
• access to the player instance as an escape hatch,
• ability to control selected features as props to the component

Installation

$ yarn add react-yt 

Minimal usage example

/**  * We are using `module` field to provide an ES module format  * and `main` field for an CommonJS fallback  */ import YouTube from "react-yt";

<YouTube   videoId={'SKGzIhOSQVY'}   autoplay={true} />

Accepted props

The player accepts all the official player parameters as props.

Additionally it's possible to subscribe to the Player events by providing an events prop with following keys:

Using the render prop

The render prop (render) will be called with an object exposing:

And all the internal Youtube player functions:

Rendering with render props

<YouTube   videoId={'SKGzIhOSQVY'}   render={({     iframe,     playVideo,     pauseVideo,     getPlayerState   }) => (     <div>       {iframe}       {getPlayerState() !== 1 && <button onClick={(event) => playVideo()}>Play video</button>}       {getPlayerState() === 1 && <button onClick={(event) => pauseVideo()}>Pause video</button>}     </div>   )} />

Controlling the player from outside

While the recommended way to control the playback is from inside the render prop function, it is also possible to control the component from outside by changing the props. Developers are able to provide the following props in order to control the component without having to remount it.

The logic uses componentWillReceiveProps to control the playback, so passing the props in a given order will override older props. Passing new values to both props at the same time will give priority to the videoId prop.

License

MIT