react-nanny

Utils to manage your React Children; find and filter children by type or custom function, enforce child content, and more!

react-nanny doesn't have any dependencies. However, it does have a peer dependency of "react": ">=16.0.0" which you most likely satisfy if you're the kind of person who's looking for utils for React children.

import React from 'react';
import { getChildrenByType, getChildren } from 'react-nanny';
import Item from './Item';

export const ToDoList ({ children }) => {
  // Get all children of type Item
  const items = getChildrenByType(children, [Item]);

  // Find all incomplete and complete Items
  const incomplete = getChildren(items, child => !child.props.completed);
  const completed = getChildren(items, child => child.props.completed);

  return (
    <>
      <div>
        <h3>To Do</h3>
        <ul>
          {incomplete}
        </ul>
      </div>
      <div>
        <h3>Completed</h3>
        <ul>
          {completed}
        </ul>
      </div>
    </>
  );
};

Click on each function name for details and examples

import { getChildByType } from 'react-nanny';
import MyComponent from './MyComponent';

getChildByType(children, [MyComponent]);

import { getChildByType, removeChildrenByType } from 'react-nanny';
import MyComponent from './MyComponent';

const child = getChildByType(children, [MyComponent]);
...
removeChildrenByType(children, [child]);

import { getChildByType, removeChildrenByType, typeOfComponent } from 'react-nanny';
import MyComponent from './MyComponent';

const child = getChildByType(children, [MyComponent]);
...
removeChildrenByType(children, [typeOfComponent(child)]);

import { getChildByType } from 'react-nanny';

getChildByType(children, ['div']);

import React from 'react';

const Hello = ({ __TYPE }) => <div>Hello World!</div>;

Hello.defaultProps = {
  __TYPE: 'Hello',
};

import { getChildByType } from 'react-nanny';

getChildByType(children, ['Hello']);

import { getChildByType } from 'react-nanny';

getChildByType(children, ['Hello'], { customTypeKey: 'CUSTOM' });

For more information on how to enforce the integrity of the customTypeKey, check out my Medium article: Find & Filter React Children By Type

Within the module you'll find the following directories and files:

package.json
CHANGELOG.md -- history of changes to the module
README.md -- this file
/lib
  └───/es5
    └───/getChild
      └───index.d.ts - 1.23 KB
      └───index.js - 1.81 KB
    └───/getChildByType
      └───index.d.ts - 4.16 KB
      └───index.js - 6.08 KB
    └───/getChildren
      └───index.d.ts - 1.21 KB
      └───index.js - 2.07 KB
    └───/getChildrenByType
      └───index.d.ts - 3.86 KB
      └───index.js - 5.41 KB
    └───/getChildrenWithDescendant
      └───index.d.ts - 638 Bytes
      └───index.js - 1.31 KB
    └───/getChildrenWithDescendantByType
      └───index.d.ts - 2.26 KB
      └───index.js - 3.02 KB
    └───/getDescendantDepth
      └───index.d.ts - 1.14 KB
      └───index.js - 2.46 KB
    └───/getDescendantDepthByType
      └───index.d.ts - 2.39 KB
      └───index.js - 3.93 KB
      └───index.d.ts - 1.1 KB
      └───index.js - 4.23 KB
    └───/noEmptyChildren
      └───index.d.ts - 1.75 KB
      └───index.js - 3.43 KB
    └───/overrideProps
      └───index.d.ts - 2.72 KB
      └───index.js - 4.66 KB
    └───/removeChildren
      └───index.d.ts - 1.22 KB
      └───index.js - 2.57 KB
    └───/removeChildrenByType
      └───index.d.ts - 3.71 KB
      └───index.js - 5.63 KB
    └───/typeOfComponent
      └───index.d.ts - 614 Bytes
      └───index.js - 1.75 KB
      └───types.d.ts - 249 Bytes
      └───types.js - 79 Bytes
    └───/_private
      └───utils.d.ts - 61 Bytes
      └───utils.js - 913 Bytes
  └───/es6
    └───/getChild
      └───index.d.ts - 1.23 KB
      └───index.js - 1.63 KB
    └───/getChildByType
      └───index.d.ts - 4.16 KB
      └───index.js - 5.78 KB
    └───/getChildren
      └───index.d.ts - 1.21 KB
      └───index.js - 1.87 KB
    └───/getChildrenByType
      └───index.d.ts - 3.86 KB
      └───index.js - 5.12 KB
    └───/getChildrenWithDescendant
      └───index.d.ts - 638 Bytes
      └───index.js - 1.13 KB
    └───/getChildrenWithDescendantByType
      └───index.d.ts - 2.26 KB
      └───index.js - 2.81 KB
    └───/getDescendantDepth
      └───index.d.ts - 1.14 KB
      └───index.js - 2.3 KB
    └───/getDescendantDepthByType
      └───index.d.ts - 2.39 KB
      └───index.js - 3.74 KB
      └───index.d.ts - 1.1 KB
      └───index.js - 905 Bytes
    └───/noEmptyChildren
      └───index.d.ts - 1.75 KB
      └───index.js - 3.2 KB
    └───/overrideProps
      └───index.d.ts - 2.72 KB
      └───index.js - 4.44 KB
    └───/removeChildren
      └───index.d.ts - 1.22 KB
      └───index.js - 2.34 KB
    └───/removeChildrenByType
      └───index.d.ts - 3.71 KB
      └───index.js - 5.32 KB
    └───/typeOfComponent
      └───index.d.ts - 614 Bytes
      └───index.js - 1.6 KB
      └───types.d.ts - 249 Bytes
      └───types.js - 12 Bytes
    └───/_private
      └───utils.d.ts - 61 Bytes
      └───utils.js - 700 Bytes