react-children-utilities
react-children-utilities copied to clipboard
Extended utils for ⚛️ React.Children data structure that adds recursive filter, map and more methods to iterate nested children.
React Children Utilities
Recursive and extended utils for React children opaque data structure.
Installation
Can be added to your application after installing the peer dependency react
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
- deepFind
- deepForEach
- deepMap
- filter
- getElementName
- groupByType
- hasChildren
- hasComplexChildren
- onlyText
- onlyValid
Contributors ✨
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!
License
MIT (c) 2016 Fernando Pasik