Use ref callbacks instead of ref strings

src/ReactPlayer.js

@@ -28,15 +28,14 @@ export default class ReactPlayer extends Component {
     )
   }
   seekTo = fraction => {
-    const player = this.refs.player
-    if (player) {
-      player.seekTo(fraction)
+    if (this.player) {
+      this.player.seekTo(fraction)
     }
   }
   progress = () => {
-    if (this.props.url && this.refs.player) {
-      const loaded = this.refs.player.getFractionLoaded() || 0
-      const played = this.refs.player.getFractionPlayed() || 0
+    if (this.props.url && this.player) {
+      const loaded = this.player.getFractionLoaded() || 0
+      const played = this.player.getFractionPlayed() || 0
       const progress = {}
       if (loaded !== this.prevLoaded) {
         progress.loaded = loaded
@@ -80,7 +79,8 @@ export default class ReactPlayer extends Component {
   renderPlayer = Player => {
     const active = Player.canPlay(this.props.url)
     const { youtubeConfig, soundcloudConfig, vimeoConfig, fileConfig, ...activeProps } = this.props
-    const props = active ? { ...activeProps, ref: 'player' } : {}
+    const ref = player => { this.player = player }
+    const props = active ? { ...activeProps, ref } : {}
     return (
       <Player
         key={Player.displayName}

src/demo/App.js

@@ -42,7 +42,7 @@ export default class App extends Component {
   }
   onSeekMouseUp = e => {
     this.setState({ seeking: false })
-    this.refs.player.seekTo(parseFloat(e.target.value))
+    this.player.seekTo(parseFloat(e.target.value))
   }
   onProgress = state => {
     // We only want to update time slider if we are not currently seeking
@@ -53,7 +53,7 @@ export default class App extends Component {
   onConfigSubmit = () => {
     let config
     try {
-      config = JSON.parse(this.refs.config.value)
+      config = JSON.parse(this.configInput.value)
     } catch (error) {
       config = {}
       console.error('Error setting config:', error)
@@ -83,7 +83,7 @@ export default class App extends Component {
         <section className='section'>
           <h1>ReactPlayer Demo</h1>
           <ReactPlayer
-            ref='player'
+            ref={player => { this.player = player }}
             className='react-player'
             width={480}
             height={270}
@@ -181,14 +181,14 @@ export default class App extends Component {
             <tr>
               <th>Custom URL</th>
               <td>
-                <input ref='url' type='text' placeholder='Enter URL' />
-                <button onClick={() => this.setState({ url: this.refs.url.value })}>Load</button>
+                <input ref={input => { this.urlInput = input }} type='text' placeholder='Enter URL' />
+                <button onClick={() => this.setState({ url: this.urlInput.value })}>Load</button>
               </td>
             </tr>
             <tr>
               <th>Custom config</th>
               <td>
-                <textarea ref='config' placeholder='Enter JSON' />
+                <textarea ref={textarea => { this.configInput = textarea }} placeholder='Enter JSON' />
                 <button onClick={this.onConfigSubmit}>Update Config</button>
               </td>
             </tr>

src/players/FilePlayer.js

@@ -10,7 +10,6 @@ export default class FilePlayer extends Base {
     return true
   }
   componentDidMount () {
-    this.player = this.refs.player
     this.player.addEventListener('canplay', this.onReady)
     this.player.addEventListener('play', this.onPlay)
     this.player.addEventListener('pause', this.props.onPause)
@@ -69,7 +68,7 @@ export default class FilePlayer extends Base {
     }
     return (
       <Media
-        ref='player'
+        ref={player => { this.player = player }}
         style={style}
         preload='auto'
         controls={controls}

src/players/SoundCloud.js

@@ -63,7 +63,7 @@ export default class SoundCloud extends FilePlayer {
     return (
       <div style={style}>
         <audio
-          ref='player'
+          ref={player => { this.player = player }}
           type='audio/mpeg'
           preload='auto'
           style={{ width: '100%', height: '100%' }}

src/players/Vimeo.js

@@ -24,7 +24,6 @@ export default class Vimeo extends Base {
   }
   componentDidMount () {
     window.addEventListener('message', this.onMessage, false)
-    this.iframe = this.refs.iframe
 
     if (!this.props.url && this.props.vimeoConfig.preload) {
       this.preloading = true
@@ -109,6 +108,13 @@ export default class Vimeo extends Base {
       width: '100%',
       height: '100%'
     }
-    return <iframe ref='iframe' frameBorder='0' style={style} allowFullScreen={fullscreen} />
+    return (
+      <iframe
+        ref={iframe => { this.iframe = iframe }}
+        frameBorder='0'
+        style={style}
+        allowFullScreen={fullscreen}
+      />
+    )
   }
 }