From 05b39fe281c4b299207334dd1da3cdbcbbc36c78 Mon Sep 17 00:00:00 2001
From: Julien Bouquillon <contact@revolunet.com>
Date: Thu, 26 Jan 2017 22:16:52 +0100
Subject: [PATCH] docs(guides): Add a basic ReactJS guide and update the FAQ
 (#3972)

---
 docs/guides/faq.md              |  7 +++++
 docs/guides/player-workflows.md |  2 ++
 docs/guides/react.md            | 55 +++++++++++++++++++++++++++++++++
 3 files changed, 64 insertions(+)
 create mode 100644 docs/guides/react.md

diff --git a/docs/guides/faq.md b/docs/guides/faq.md
index ddf6941a4e..f167b47af2 100644
--- a/docs/guides/faq.md
+++ b/docs/guides/faq.md
@@ -38,6 +38,7 @@
 * [Q: Does video.js have any support for advertisement integrations?](#q-does-videojs-have-any-support-for-advertisement-integrations)
 * [Q: Can video.js be required in node.js?](#q-can-videojs-be-required-in-nodejs)
 * [Q: Does video.js work with webpack?](#q-does-videojs-work-with-webpack)
+* [Q: Does video.js work with react?](#q-does-videojs-work-with-react)
 
 ## Q: What is video.js?
 
@@ -269,6 +270,12 @@ Yes! Please [submit an issue or open a pull request][pr-issue-question] if this
 
 Yes! Please [submit an issue or open a pull request][pr-issue-question] if this does not work.
 
+Be sure to use `require('!style-loader!css-loader!video.js/dist/video-js.css')` to inject video.js CSS.
+
+## Q: Does video.js work with react?
+
+Yes! See [ReactJS integration example](./guides/react.md).
+
 [plugin-guide]: plugins.md
 
 [install-guide]: http://videojs.com/getting-started/
diff --git a/docs/guides/player-workflows.md b/docs/guides/player-workflows.md
index 7e9e7cc088..b6db1e743b 100644
--- a/docs/guides/player-workflows.md
+++ b/docs/guides/player-workflows.md
@@ -367,6 +367,8 @@ Coming soon...
 
 ### React
 
+See [ReactJS integration example](./react.md)
+
 ### Ember
 
 ### Angular
diff --git a/docs/guides/react.md b/docs/guides/react.md
new file mode 100644
index 0000000000..a45c69de29
--- /dev/null
+++ b/docs/guides/react.md
@@ -0,0 +1,55 @@
+# video.js and ReactJS integration
+
+Here's a basic ReactJS player implementation.
+
+It just instantiates the video.js player on `componentDidMount` and destroys it on `componentWillUnmount`.
+
+```jsx
+import React from 'react';
+import videojs from 'video.js'
+
+export default class VideoPlayer extends React.Component {
+  componentDidMount() {
+    // instantiate video.js
+    this.player = videojs(this.videoNode, this.props, function onPlayerReady() {
+      console.log('onPlayerReady', this)
+    });
+  }
+
+  // destroy player on unmount
+  componentWillUnmount() {
+    if (this.player) {
+      this.player.dispose()
+    }
+  }
+
+  // wrap the player in a div with a `data-vjs-player` attribute
+  // so videojs won't create additional wrapper in the DOM
+  // see https://github.com/videojs/video.js/pull/3856
+  render() {
+    return (
+      <div data-vjs-player>
+        <video ref={ node => this.videoNode = node } className="video-js"></video>
+      </div>
+    )
+  }
+}
+```
+
+You can then use it like this:
+
+```jsx
+// see https://github.com/videojs/video.js/blob/master/docs/guides/options.md
+const videoJsOptions = {
+  autoPlay: true,
+  controls: true,
+  sources: [{
+    src: '/path/to/video.mp4',
+    type: 'video/mp4'
+  }]
+}
+
+return <VideoPlayer { ...videoJsOptions } />
+```
+
+Dont forget to include the video.js CSS, located at `video.js/dist/video-js.css`.