Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

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 react-library reactjs

Last synced: about 13 hours ago
JSON representation

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

Host: GitHub
URL: https://github.com/fernandopasik/react-children-utilities
Owner: fernandopasik
License: mit
Created: 2016-10-05T01:45:33.000Z (about 8 years ago)
Default Branch: main
Last Pushed: 2024-12-10T15:18:13.000Z (3 days ago)
Last Synced: 2024-12-10T16:32:24.109Z (3 days ago)
Topics: react, react-library, reactjs
Language: TypeScript
Homepage: https://fernandopasik.com/react-children-utilities
Size: 5.58 MB
Stars: 357
Watchers: 4
Forks: 24
Open Issues: 3
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE

Awesome Lists containing this project

awesome-react-components - react-children-utilities - Extended utils for React.Children. (Utilities / Miscellaneous)
awesome-list - react-children-utilities - Extended utils for React.Children. (Utilities / Miscellaneous)
awesome-react-components - react-children-utilities - Extended utils for React.Children. (Utilities / Miscellaneous)
awesome-react-components - react-children-utilities - Extended utils for React.Children. (Utilities / Miscellaneous)
awesome-react-components - react-children-utilities - Extended utils for React.Children. (Utilities / Miscellaneous)
fucking-awesome-react-components - react-children-utilities - Extended utils for React.Children. (Utilities / Miscellaneous)

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)