https://github.com/gajus/react-aux
A self-eradicating component for rendering multiple elements.
https://github.com/gajus/react-aux
react
Last synced: about 1 year ago
JSON representation
A self-eradicating component for rendering multiple elements.
- Host: GitHub
- URL: https://github.com/gajus/react-aux
- Owner: gajus
- License: other
- Created: 2017-08-06T17:33:07.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-11-29T09:45:30.000Z (over 8 years ago)
- Last Synced: 2025-03-28T18:07:51.608Z (about 1 year ago)
- Topics: react
- Language: JavaScript
- Size: 12.7 KB
- Stars: 326
- Watchers: 3
- Forks: 19
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-aux
[](https://www.npmjs.org/package/react-aux)
[](https://twitter.com/kuizinas)
A self-eradicating component for rendering multiple elements.
## If you are using React 16.2 or higher
React 16.2 [includes support for a new `React.Fragment` API](https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html) which works very similar to this library. If you don't know which one to pick, we recommend the version provided by React. This library mostly exists for those who can't upgrade to React 16.2 yet.
## Motivation
Prior to React v16, returning multiple elements from a component required to wrap them in an auxiliary element, e.g.
```js
const Root = () => {
return
Hello, World!
I am a demo for react-aux.
;
};
```
The latter produces the following DOM:
```html
Hello, World!
I am a demo for react-aux.
```
Starting with React v16, a single component can return multiple components without a wrapping element, e.g.
```js
const Aux = (props) => {
return props.children;
};
const Root = () => {
return
Hello, World!
I am a demo for react-aux.
;
};
```
The latter produces paragraph elements without the wrapping node:
```html
Hello, World!
I am a demo for react-aux.
```
As you can see, `react-aux` is literally just 3 lines of code. Therefore, you could implement it in your own codebase without using `react-aux`. However, `props => props.children` on its own does not explain the intent. `react-aux` as an abstraction serves the purpose of enabling a self-documenting code, i.e. the next time you see someone doing:
```js
import Aux from 'react-aux';
const Root = () => {
return
Hello, World!
I am a demo for react-aux.
;
};
```
You will know exactly what is the intent of the code.
## Related articles
* [Using React v16 to create self-destructing components](https://medium.com/@gajus/using-react-v16-to-create-self-destructing-components-de8e4eb61d0f)
## FAQ
### Whats the difference from using an array?
You can use an array if you assign each `React$Element` a pseudo-property `key` with a unique value, e.g.
```js
import Aux from 'react-aux';
const Root = () => {
return [
Hello, World!
,
I am a demo for react-aux.
];
};
```
However, it requires manually ensuring key uniqueness and I am too [lazy](http://threevirtues.com/) for this.
### Whats with the name?
"aux" is a convention I've been using ever since I remember starting to write HTML/ CSS. Auxiliary element is something that does not have semantic purpose but exist for the purpose of grouping elements, styling, etc.