react-refs

Since string references have been removed from react for multiple reasons, we as developers were forced to create a new function each time we set such a string reference for a react element or component.

To avoid this and bring back the convenience of string references (even at the cost of a few minor problems, as mentioned above), I've built this library.

Despite of all the things linked above, using this project is perfectly fine. Because either way, you should ensure to use string references as less as possible. But when you do, you'll probably built a logic like this one by yourself (I usually do that), so this packagage simply abstracts this part in the best way.

Usage

Firstly, install the package using npm:

npm install --save react-refs

Then load it:

import setRef from 'react-refs'

Next, initialize the package in your constructor:

constructor(props) {
  super(props)
  this.setReference = setRef.bind(this)
}

As the final step, you can create a reference in render (using the example code mentioned below, your reference will live inside the this.example property):

<Example ref={this.setReference} name="example"/>

Increasing Performance

The package is already binding in constructor to make re-rendering as fast as possible out of the box. But if you want to get the maximum out of performance, I suggest pre-filling each reference with null in constructor (v8 likes it a lot when you tell it as much as possible ahead of time):

constructor(props) {
  super(props)
  this.setReference = setRef.bind(this)
  
  // Based on the "name" property of the <Example/> component above
  this.example = null
}

Caught a Bug?

1. Fork this repository to your own GitHub account and then clone it to your local device
2. Link the package to the global module directory: npm link
3. Within the electron app of your choice, link it to the dependencies: npm link react-refs. Instead of the default one from npm, it will now use your local clone of the package!

Author

• Leo Lamprecht (@notquiteleo)