react-aux

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 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.

const Root = () => {
  return <div>
    <p>Hello, World!</p>
    <p>I am a demo for react-aux.</p>
  </div>;
};

The latter produces the following DOM:

<div>
  <p>Hello, World!</p>
  <p>I am a demo for react-aux.</p>
</div>

Starting with React v16, a single component can return multiple components without a wrapping element, e.g.

const Aux = (props) => {
  return props.children;
};

const Root = () => {
  return <Aux>
    <p>Hello, World!</p>
    <p>I am a demo for react-aux.</p>
  </Aux>;
};

The latter produces paragraph elements without the wrapping node:

<p>Hello, World!</p>
<p>I am a demo for react-aux.</p>

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:

import Aux from 'react-aux';

const Root = () => {
  return <Aux>
    <p>Hello, World!</p>
    <p>I am a demo for react-aux.</p>
  </Aux>;
};

You will know exactly what is the intent of the code.

Using React v16 to create self-destructing components

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.

import Aux from 'react-aux';

const Root = () => {
  return [
    <p key='p1'>Hello, World!</p>,
    <p key='p2'>I am a demo for react-aux.</p>
  ];
};

However, it requires manually ensuring key uniqueness and I am too lazy 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.

gajus/react-aux