react-children-utilities

React Children Utilities

Recursive and extended utils for React children opaque data structure.

Installation

Available as a package and can be added to your application with npm or yarn after installing the peer dependency react

# with yarn
yarn add react-children-utilities react

# with npm
npm install --save react-children-utilities

Usage

This package extends the existing React.Children utilities, you can import it as a whole.

import React from 'react';
import Children from 'react-children-utilities';

const MyComponent = ({ children }) => {
  const onlySpans = Children.filter(children, (child) => child.type === 'span');
  return <div>{onlySpans}</div>;
};

Also you can import only the function you need

import React from 'react';
import { filter } from 'react-children-utilities';

const MyComponent = ({ children }) => {
  const onlySpans = filter(children, (child) => child.type === 'span');
  return <div>{onlySpans}</div>;
};

API documentation

• deepFilter(children, filterFn)
• deepFind(children, findFn)
• deepForEach(children, forEachFn)
• deepMap(children, mapFn)
• filter(children, filterFn)
• groupByType(children, types, rest)
• hasChildren(children)
• hasComplexChildren(children)
• onlyText(children)

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Fernando Pasik 🐛 💻 📖 🤔

mrm007 🐛 💻

yosef langer 🐛 💻

iyegoroff 🐛 💻

Mark Allen 🐛 💻

Ryosuke IWANAGA 🐛 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

License

MIT (c) 2018 Fernando Pasik