# React Children Utilities Extended utils for ⚛️ React.Children data structure that adds recursive filter, map and more methods to iterate nested children. [![Gzip Bundle Size](https://img.badgesize.io/https://unpkg.com/react-children-utilities/react-children-utilities.min.js?compression=gzip)](https://unpkg.com/react-children-utilities/react-children-utilities.min.js 'Gzip Bundle Size') [![Build Status](https://github.com/fernandopasik/react-children-utilities/actions/workflows/main.yml/badge.svg)](https://github.com/fernandopasik/react-children-utilities/actions/workflows/main.yml 'Build Status') [![Coverage Status](https://codecov.io/gh/fernandopasik/react-children-utilities/branch/main/graph/badge.svg)](https://codecov.io/gh/fernandopasik/react-children-utilities 'Coverage Status') [![Known Vulnerabilities](https://snyk.io/test/github/fernandopasik/react-children-utilities/badge.svg?targetFile=package.json)](https://snyk.io/test/github/fernandopasik/react-children-utilities?targetFile=package.json 'Known Vulnerabilities') [![All Contributors](https://img.shields.io/badge/all_contributors-7-orange.svg?style=flat-square)](#contributors) [![npm version](https://img.shields.io/npm/v/react-children-utilities.svg?logo=npm)](https://www.npmjs.com/package/react-children-utilities 'npm version') [![npm downloads](https://img.shields.io/npm/dm/react-children-utilities.svg)](https://www.npmjs.com/package/react-children-utilities 'npm downloads') ## Installation Can be added to your application after installing the peer dependency `react` ```sh npm install --save react-children-utilities ``` ## Usage This package extends the existing React.Children utilities, you can import it as a whole. ```jsx import React from 'react'; import Children from 'react-children-utilities'; const MyComponent = ({ children }) => { const onlySpans = Children.filter(children, (child) => child.type === 'span'); return

{onlySpans}

; }; ``` Also you can import only the function you need ```jsx import React from 'react'; import { filter } from 'react-children-utilities'; const MyComponent = ({ children }) => { const onlySpans = filter(children, (child) => child.type === 'span'); return

{onlySpans}

; }; ``` ## API documentation - [deepFilter](/docs/deep-filter.md) - [deepFind](/docs/deep-find.md) - [deepForEach](/docs/deep-foreach.md) - [deepMap](/docs/deep-map.md) - [filter](/docs/filter.md) - [getElementName](/docs/get-element-name.md) - [groupByType](/docs/group-by-type.md) - [hasChildren](/docs/has-children.md) - [hasComplexChildren](/docs/has-complex-children.md) - [onlyText](/docs/only-text.md) - [onlyValid](/docs/only-valid.md) ## Contributors ✨ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

_{Fernando Pasik}
🐛 💻 📖 🤔

_mrm007
🐛 💻

_{yosef langer}
🐛 💻

_iyegoroff
🐛 💻

_{Mark Allen}
🐛 💻

_{Ryosuke IWANAGA}
🐛 💻

_{Daniel Pinyol}
🐛 💻

_{Brian Bartholomew}
🐛 💻

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! ## License MIT (c) 2016 [Fernando Pasik](https://fernandopasik.com)

	Stars	Issues	Version	Updated	Created
react-children-utilities	352	3	2.10.0	9 months ago	8 years ago
react-media	2,439	8	1.10.0	5 years ago	10 years ago
react-middle-ellipsis	63	7	1.2.2	2 years ago	5 years ago

react-children-utilities vs react-media vs react-middle-ellipsis

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past