fernandopasik / react-children-utilities

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

Home Page:https://fernandopasik.com/react-children-utilities

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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 Build Status Coverage Status Known Vulnerabilities

All Contributors npm version npm downloads

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

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

About

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

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

License:MIT License


Languages

Language:TypeScript 98.5%Language:JavaScript 1.5%