React Itertools
A suite of tools for manipulating React children
🧐
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
👫
Contributing PR's and issues welcomed! For more guidance check out CONTRIBUTING.md
📃
Licensing See the project's MIT License.