Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/leo/react-refs
Easily set references to React elements
https://github.com/leo/react-refs
react reference replacement string-ref
Last synced: 4 months ago
JSON representation
Easily set references to React elements
- Host: GitHub
- URL: https://github.com/leo/react-refs
- Owner: leo
- License: mit
- Archived: true
- Created: 2017-06-15T18:14:43.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-11-08T21:42:24.000Z (about 7 years ago)
- Last Synced: 2024-08-06T04:11:16.726Z (4 months ago)
- Topics: react, reference, replacement, string-ref
- Language: JavaScript
- Homepage: https://npmjs.com/react-refs
- Size: 8.79 KB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: license.md
Awesome Lists containing this project
README
# react-refs
---
**DEPRECATED:** This is not a good idea in terms of performance. Bind in `constructor`... 😛
---
Since [string references](https://facebook.github.io/react/docs/refs-and-the-dom.html#legacy-api-string-refs) have been removed from [react](https://facebook.github.io/react/) for [multiple reasons](https://github.com/facebook/react/pull/8333#issuecomment-271648615), we as developers were forced to create a new function each time we set such a string reference for a [react](https://facebook.github.io/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](https://facebook.github.io/react/docs/refs-and-the-dom.html#dont-overuse-refs). But when you do, you'll probably built a logic like [this one](https://github.com/leo/react-refs/blob/master/index.js) by yourself (I usually do that), so this packagage simply abstracts this part in the best way.
## Usage
Firstly, install the package using [npm](https://www.npmjs.com):
```bash
npm install --save react-refs
```
Then load it:
```js
import setRef from 'react-refs'
```
Next, initialize the package in your `constructor`:
```js
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):
```jsx
```
### 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](https://developers.google.com/v8/) likes it a lot when you tell it as much as possible ahead of time):
```js
constructor(props) {
super(props)
this.setReference = setRef.bind(this)
// Based on the "name" property of the component above
this.example = null
}
```
## Caught a Bug?
1. [Fork](https://help.github.com/articles/fork-a-repo/) this repository to your own GitHub account and then [clone](https://help.github.com/articles/cloning-a-repository/) 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](https://www.npmjs.com), it will now use your local clone of the package!
## Author
- Leo Lamprecht ([@notquiteleo](https://twitter.com/notquiteleo))