react-children-addons

react-children-addons

React children utilities and addons

npm install react-children-addons -S

# or

yarn add react-children-addons -S

API Methods

• toFlatArray
• mapFlat

toFlatArray

Takes children and flattens all React.Fragments into a single array

import { toFlatArray } from 'react-children-addons';

function List({ children }) {
  console.log(toFlatArray(children));
}

<List>
  <li>Item</li>
  <>
    <li>Another Item</li>
  </>
</List>

[<li>Item</li>, <li>Another Item</li>]

mapFlat

Same as toFlatArray but with a map function

import React from 'react';
import { mapFlat } from 'react-children-addons';

function List({ children }) {
  return (
    <ul>
      {mapFlat(children, child => React.cloneElement(child, { className: 'link' }))}
    </ul>
  );
}

<List>
  <li>Item</li>
  <>
    <li>Another Item</li>
  </>
  <React.Fragment>
    <>
      <li>Nested Item</li>
    </>
  </React.Fragment>
</List>

<ul>
  <li class="link">Item</li>
  <li class="link">Another Item</li>
  <li class="link">Nested Item</li>
</ul>

Todo

Add tests, changelog and more ideas for addons.