Rename refs to references

`refs` is used internally by React Closes cookpete/react-player#868 Closes cookpete/react-player#866 Fixes cookpete/react-player#867 Fixes cookpete/react-player#861
albanqoku · Apr 28, 2020 · 7ab8280 · 7ab8280
1 parent 6aa87e2
commit 7ab8280
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git a/src/ReactPlayer.js b/src/ReactPlayer.js
@@ -42,7 +42,8 @@ export default class ReactPlayer extends Component {
     showPreview: !!this.props.light
   }
 
-  refs = {
+  // Use references, as refs is used by React
+  references = {
     wrapper: wrapper => { this.wrapper = wrapper },
     player: player => { this.player = player }
   }
@@ -143,7 +144,7 @@ export default class ReactPlayer extends Component {
       <Player
         {...this.props}
         key={player.key}
-        ref={this.refs.player}
+        ref={this.references.player}
         config={config}
         activePlayer={player.lazyPlayer || player}
         onReady={this.handleReady}
@@ -156,7 +157,7 @@ export default class ReactPlayer extends Component {
     const { showPreview } = this.state
     const attributes = this.getAttributes(url)
     return (
-      <Wrapper ref={this.refs.wrapper} style={{ ...style, width, height }} {...attributes}>
+      <Wrapper ref={this.references.wrapper} style={{ ...style, width, height }} {...attributes}>
         <Suspense fallback={null}>
           {showPreview
             ? this.renderPreview(url)

diff --git a/test/ReactPlayer/instanceMethods.js b/test/ReactPlayer/instanceMethods.js
@@ -12,7 +12,7 @@ const COMMON_METHODS = ['getDuration', 'getCurrentTime', 'getSecondsLoaded', 'ge
 for (const method of COMMON_METHODS) {
   test(`${method}()`, t => {
     const instance = shallow(<ReactPlayer />).instance()
-    instance.refs.player({ [method]: () => 123 })
+    instance.references.player({ [method]: () => 123 })
     t.true(instance[method]() === 123)
   })
 
@@ -25,14 +25,14 @@ for (const method of COMMON_METHODS) {
 test('getInternalPlayer() - default', t => {
   const instance = shallow(<ReactPlayer />).instance()
   const getInternalPlayer = sinon.fake.returns('abc')
-  instance.refs.player({ getInternalPlayer })
+  instance.references.player({ getInternalPlayer })
   t.true(instance.getInternalPlayer() === 'abc')
   t.true(getInternalPlayer.calledOnceWith('player'))
 })
 
 test('seekTo()', t => {
   const instance = shallow(<ReactPlayer />).instance()
-  instance.refs.player({ seekTo: sinon.fake() })
+  instance.references.player({ seekTo: sinon.fake() })
   instance.seekTo(5)
   t.true(instance.player.seekTo.calledOnce)
   t.true(instance.player.seekTo.calledWith(5))
@@ -52,8 +52,8 @@ test('onReady()', t => {
 
 test('refs', t => {
   const instance = shallow(<ReactPlayer />).instance()
-  instance.refs.player('abc')
-  instance.refs.wrapper('def')
+  instance.references.player('abc')
+  instance.references.wrapper('def')
   t.true(instance.player === 'abc')
   t.true(instance.wrapper === 'def')
 })