Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/fernandopasik/react-children-utilities

Extended utils for ⚛️ React.Children data structure that adds recursive filter, map and more methods to iterate nested children.
https://github.com/fernandopasik/react-children-utilities

react reactjs utility-library utils

Last synced: 2 months ago
JSON representation

Extended utils for ⚛️ React.Children data structure that adds recursive filter, map and more methods to iterate nested children.

Lists

README 

        
# 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)