Negligent Parachute Maintainers

    react-aux

    1.1.0 • Public • Published

    react-aux

    NPM version Twitter Follow

    A self-eradicating component for rendering multiple elements.

    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.

    Related articles

    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.

    Keywords

    Install

    npm i react-aux

    DownloadsWeekly Downloads

    354

    Version

    1.1.0

    License

    BSD-3-Clause

    Last publish

    Collaborators

    • gajus