React-itertools NPM

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

Try the CodeSandbox 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>
    </>
  );
}