react-itertools
v0.0.6
Published
A suite of tools for manipulating React children
Downloads
54
Maintainers
Readme
React Itertools
What is this? 🧐
A suite of tools for manipulating React children: each
, filter
, find
, groupBy
, map
, reduce
.
React.Children.map
and React.Children.forEach
provided by the React Children API iterate shallowly. The utilities in this library will descend the child tree and visit every child.
Installation & Usage 📦
- Add this package to your project:
yarn add react-itertools
Just trying things out or want to skip the build step? Use the unpkg URL:
<script src="https://unpkg.com/react-itertools/dist/index.production.js"></script>
Example
import { map } from "react-itertools";
import { isValidElement } from "react";
const MapExample = ({ children }) => {
const fn = (el) => {
return (
<div
style={{
border: "1px solid black",
padding: "10px",
backgroundColor: "blanchedalmond",
}}
>
{isValidElement(el) && el.props.children}
</div>
);
};
return <>{map(children, fn)}</>;
};
export default function App() {
return (
<>
<p>
`map` recursively iterates through all `children` and returns the
transformed result of applying `fn` to each child.
</p>
<p>Recurses depth first, post-order.</p>
<MapExample>
<div>
<div>
<div />
<div />
</div>
<div>
<div />
<div />
</div>
</div>
</MapExample>
</>
);
}
Highlights
🎁 Zero run time dependencies
🪐 Isomorphic / Universal -- safe to run in any JS context: the browser or on a server
Contributing 👫
PR's and issues welcomed! For more guidance check out CONTRIBUTING.md
Licensing 📃
See the project's MIT License.