Extended utils for ⚛️ React.Children data structure that adds recursive filter, map and more methods to iterate nested children.
Can be added to your application after installing the peer dependency react
npm install --save react-children-utilitiesThis 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>;
};- deepFilter
- deepFind
- deepForEach
- deepMap
- filter
- getElementName
- groupByType
- hasChildren
- hasComplexChildren
- onlyText
- onlyValid
Thanks goes to these wonderful people (emoji key):
Fernando Pasik 🐛 💻 📖 🤔 |
mrm007 🐛 💻 |
yosef langer 🐛 💻 |
iyegoroff 🐛 💻 |
Mark Allen 🐛 💻 |
Ryosuke IWANAGA 🐛 💻 |
Daniel Pinyol 🐛 💻 |
Brian Bartholomew 🐛 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!
MIT (c) 2016 Fernando Pasik