diff --git a/docs/guides/react.md b/docs/guides/react.md index de9faa544e..76146b5d2b 100644 --- a/docs/guides/react.md +++ b/docs/guides/react.md @@ -54,3 +54,94 @@ return Dont forget to include the video.js CSS, located at `video.js/dist/video-js.css`. [options]: /docs/guides/options.md + + +## Using a React Component as a Video JS Component + +```jsx +/** + * EpisodeList.js + * + * This is just a plain ol' React component. + * the vjsComponent methods, player methods etc. are available via + * the vjsComponent prop (`this.props.vjsComponent`) + */ +import React, { Component, PropTypes } from 'react'; + +class EpisodeList extends Component { + render() { + return ( +
+

{this.props.body}

+
+ ); + } +} + + +/** + * vjsEpisodeList.js + * + * Here is where we register a Video JS Component and + * mount the React component to it when the player is ready. + */ +import EpisodeList from './EpisodeList'; +import ReactDOM from 'react-dom'; +import videojs from 'video.js'; + +const vjsComponent = videojs.getComponent('Component'); + +class vjsEpisodeList extends vjsComponent { + + constructor(player, options) { + super(player, options); + + /* Bind the current class context to the mount method */ + this.mount = this.mount.bind(this); + + /* When player is ready, call method to mount React component */ + player.ready(() => { + this.mount(); + }); + } + + /** + * We will render out the React EpisodeList component into the DOM element + * generated automatically by the VideoJS createEl() method. + * + * We fetch that generated element using `this.el()`, a method provided by the + * vjsComponent class that this class is extending. + */ + mount() { + ReactDOM.render(, this.el() ); + } +} + +/** + * Make sure to register the vjsComponent so Video JS knows it exists + */ +vjsComponent.registerComponent('vjsEpisodeList', vjsEpisodeList); + +export default vjsEpisodeList; + + +/** + * VideoPlayer.js + * Check the above example for how to integrate the rest of this class. + */ + +// ... + componentDidMount() { + // instantiate video.js + this.player = videojs(this.videoNode, this.props, function onPlayerReady() { + console.log('onPlayerReady', this) + }); + + /** + * Fetch the controlBar component and add the new vjsEpisodeList component as a child + * You can pass options here if desired in the second object. + */ + this.player.getChild('controlBar').addChild('vjsEpisodeList', {}); + } +// ... +```