https://github.com/3rd-eden/references
Providing references to your React components from one single location
https://github.com/3rd-eden/references
createref forwardref react react-native ref references
Last synced: about 1 year ago
JSON representation
Providing references to your React components from one single location
- Host: GitHub
- URL: https://github.com/3rd-eden/references
- Owner: 3rd-Eden
- License: mit
- Created: 2019-05-18T15:54:24.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2019-05-20T12:04:31.000Z (almost 7 years ago)
- Last Synced: 2025-01-10T04:40:52.268Z (about 1 year ago)
- Topics: createref, forwardref, react, react-native, ref, references
- Language: JavaScript
- Size: 5.86 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# references
`references` is a replacement of the `React.createRef` method which (ab)uses
the same internal data structure to store all of the references in a single
location. This allows for some pretty unique uses:
- **testing** You can look-up any of the references that you created in the
component tree and perform assertions on them.
- **complex components** It's not uncommon that you need to add more than one
reference to your render tree. You can now manage these from a single
location.
## Installation
The `references` library is released in the public npm registry and can be
installed by running:
```
npm install --save references
```
## Usage
The library is designed to be a replacement of the `React.createRef` function
that ships in React, this is possible because it uses the same object
structure.
```js
const refs = require('references');
const ref = refs();
console.log(ref.current);
```
### create(name)
Create a new named reference. The name later be used to retrieve the ref
using the `get` method. The name argument is **required** and should be
unique for the created `reference` instance.
```js
const refs = require('references');
const ref = refs();
const label = ref.create('label');
```
### forward(name)
It returns an object that should be spread on the component. It will introduce
the following properties:
- `ref` Created reference with the supplied name.
- `references` Reference to the references instance, so you can chain them.
```js
const refs = require('references');
const ref = refs();
const label = ref.forward('label');
```
### get(name)
The `get` method allows you to find the references that were created. It
accepts a single argument, which is the name of the ref that was created.
It's possible that a ref was created from another reference, in that case
you can use the dot notation reference the created ref.
```js
const refs = require('references');
const ref = refs();
const input = ref.create('input'); // This is what you pass to your components
const header = ref.create('header'); // using the `ref` property:
const label = header.create('label'); //
console.log(ref.get('input')); // Points to the `input` ref
console.log(ref.get('header')); // Points to the `header` ref
console.log(ref.get('label')); // Returns null, as label was created as child of header
console.log(ref.get('header.label')); // Points to the `label` ref
console.log(header.get('label')); // Points to the `label` ref
```
## Example
```js
import React, { Component } from 'react';
import references from 'references';
class Example extends Component {
constructor() {
super(...arguments);
this.references = this.props.references || references();
}
render() {
const refs = this.references;
return (
tiny text here
)
}
}
```
```js
```
The `` will now have the following references created:
- `` (Just `ref.get()` without any arguments )
- `header`
- `header.title`
- `smol`
```js
const refs = references();
```
The `` will now have the following references created:
- `foo`
- `foo.header`
- `foo.header.title`
- `foo.smol`
## License
[MIT](./LICENSE)