# react-children-utilities
> Extended utils for ⚛️ React.Children data structure that adds recursive filter, map and more methods to iterate nested children.
Latest version **2.10.0** (published 2023-12-24) · MIT license · 0 weekly downloads
## Install
```sh
npm install react-children-utilities
pnpm add react-children-utilities
yarn add react-children-utilities
bun add react-children-utilities
```
## Health
**Score 30/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities; high quality score.
Warnings: low downloads.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 2.10.0 |
| Published | 2023-12-24 |
| First published | 2016-11-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 57.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Fernando Pasik |
| Maintainers | fernandopasik |
| Keywords | children, react, reactjs, utilities, utils |
## Links
- npm: https://www.npmjs.com/package/react-children-utilities
- Repository: https://github.com/fernandopasik/react-children-utilities
- Homepage: https://fernandopasik.com/react-children-utilities
- Issues: https://github.com/fernandopasik/react-children-utilities/issues
- npm.io page: https://npm.io/package/react-children-utilities
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 2.10.0 (latest) — 2023-12-24
- 2.9.0 — 2023-03-09
- 2.8.0 — 2022-04-30
- 2.7.1 — 2022-04-10
- 2.7.0 — 2022-01-25
- 2.6.4 — 2022-01-22
- 2.6.3 — 2021-09-30
- 2.6.2 — 2021-09-01
- 2.6.1 — 2021-08-17
- 2.6.0 — 2021-08-03
- 2.5.4 — 2021-07-26
- 2.5.3 — 2021-06-02
- 2.5.2 — 2021-05-20
- 2.5.1 — 2021-05-06
- 2.5.0 — 2021-03-19
- … 82 more at https://npm.io/package/react-children-utilities/versions
## README
# React Children Utilities
Extended utils for ⚛️ React.Children data structure that adds recursive filter, map and more methods to iterate nested children.
[](https://unpkg.com/react-children-utilities/react-children-utilities.min.js 'Gzip Bundle Size')
[](https://github.com/fernandopasik/react-children-utilities/actions/workflows/main.yml 'Build Status')
[](https://codecov.io/gh/fernandopasik/react-children-utilities 'Coverage Status')
[](https://snyk.io/test/github/fernandopasik/react-children-utilities?targetFile=package.json 'Known Vulnerabilities')
[](#contributors)
[](https://www.npmjs.com/package/react-children-utilities 'npm version')
[](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)):
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)
---
_Source: https://npm.io/package/react-children-utilities · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
