react-nanny

react-nanny

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

Hello friend. Have you ever had the need to:

• ...query a set of React Children by type or otherwise?
• ...reject and remove some of your children for whatever [judgement free] reason?
• ...ensure that your children return content at some level?

If you answered yes to any of those questions, then it sounds like your children could use a nanny to help bring order to the chaos...

Version: 2.7.0

Dependencies

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.

Summary of Utils

Click on each function name for details and examples

function	Description
getChild	Gets first child by specified predicate
getChildDeep	Gets first child by specified predicate (deep search)
getChildByType	Gets first child by specified type
getChildByTypeDeep	Gets first child by specified type (deep search)
getChildren	Gets all children by specified predicate
getChildrenDeep	Gets all children by specified predicate (deep search)
getChildrenByType	Gets all children by specified type
getChildrenByTypeDeep	Gets all children by specified type (deep search)
getChildrenWithDescendant	Gets all children by specified predicate or that have a descendant node in their lineage which matches the predicate
getChildrenWithDescendantByType	Gets all children by specified type or that have a descendant node in their lineage which match the specified type
getDescendantDepth	Gets the depth to the first descendant (or self) of each root child that match the specified predicate
getDescendantDepthByType	Gets the depth to the first descendant (or self) of each root child that match the specified types
noEmptyChildrenDeep	Ensure that there is some level of content and not just a bunch of empty divs, spans, etc (deep search)
overrideProps	Immutably override props of the children of the original component and (optionally) the original component
removeChildren	Removes all children by specified predicate
removeChildrenDeep	Removes all children by specified predicate (deep search)
removeChildrenByType	Removes all children by specified type
removeChildrenByTypeDeep	Removes all children by specified type (deep search)
typeOfComponent	Gets the string type of the component's {customTypeKey}, string type of the core html (JSX intrinsic) element, or the function type

---

What can I use to derive types for a comparison?

You can use an imported type, a React.ReactNode, value from typeOfComponent, a string type for an HTML (JSX Intrinsic) element, or a string representation of the type by using the customTypeKey feature.

Imported Type

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

getChildByType(children, [MyComponent]);

React.ReactNode

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

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

typeOfComponent

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

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

String type for HTML (JSX Intrinsic) Elements

import { getChildByType } from 'react-nanny';

getChildByType(children, ['div']);

customTypeKey

What the heck is a customTypeKey?

One simple way to be able to define and identify a type on a component and ensure that it is the same in development builds and production builds is to add a constant prop that contains the string type. Consider the following hypothetical component:

import React from 'react';

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

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

The Hello has a prop __TYPE that has a value of 'Hello'. We can query against this value and know that it's reliable regardless of environment.

The customTypeKey in react-nanny defines what the name of this prop is. In our example, customTypeKey would be '__TYPE' to query using this technique

import { getChildByType } from 'react-nanny';

getChildByType(children, ['Hello']);

Let's say you don't like __TYPE and what to use your own value such as: CUSTOM. You can accomplish this by providing the name for the customTypeKey:

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

Package Contents

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.1 KB
      └───index.js - 1.73 KB
    └───/getChildByType
      └───index.d.ts - 4.16 KB
      └───index.js - 6.08 KB
    └───/getChildren
      └───index.d.ts - 1.1 KB
      └───index.js - 2.11 KB
    └───/getChildrenByType
      └───index.d.ts - 3.59 KB
      └───index.js - 5.13 KB
    └───/getChildrenWithDescendant
      └───index.d.ts - 579 Bytes
      └───index.js - 1.4 KB
    └───/getChildrenWithDescendantByType
      └───index.d.ts - 2.26 KB
      └───index.js - 3.14 KB
    └───/getDescendantDepth
      └───index.d.ts - 1.09 KB
      └───index.js - 2.54 KB
    └───/getDescendantDepthByType
      └───index.d.ts - 2.39 KB
      └───index.js - 4.06 KB
      └───index.d.ts - 1.08 KB
      └───index.js - 4.06 KB
    └───/noEmptyChildren
      └───index.d.ts - 1.75 KB
      └───index.js - 3.43 KB
    └───/overrideProps
      └───index.d.ts - 1.61 KB
      └───index.js - 2.49 KB
    └───/removeChildren
      └───index.d.ts - 1.11 KB
      └───index.js - 2.61 KB
    └───/removeChildrenByType
      └───index.d.ts - 3.71 KB
      └───index.js - 5.74 KB
    └───/typeOfComponent
      └───index.d.ts - 614 Bytes
      └───index.js - 1.5 KB
      └───types.d.ts - 249 Bytes
      └───types.js - 79 Bytes
    └───/_private
      └───utils.d.ts - 61 Bytes
      └───utils.js - 575 Bytes
  └───/es6
    └───/getChild
      └───index.d.ts - 1.1 KB
      └───index.js - 1.55 KB
    └───/getChildByType
      └───index.d.ts - 4.16 KB
      └───index.js - 5.78 KB
    └───/getChildren
      └───index.d.ts - 1.1 KB
      └───index.js - 1.91 KB
    └───/getChildrenByType
      └───index.d.ts - 3.59 KB
      └───index.js - 4.85 KB
    └───/getChildrenWithDescendant
      └───index.d.ts - 579 Bytes
      └───index.js - 1.22 KB
    └───/getChildrenWithDescendantByType
      └───index.d.ts - 2.26 KB
      └───index.js - 2.93 KB
    └───/getDescendantDepth
      └───index.d.ts - 1.09 KB
      └───index.js - 2.39 KB
    └───/getDescendantDepthByType
      └───index.d.ts - 2.39 KB
      └───index.js - 3.86 KB
      └───index.d.ts - 1.08 KB
      └───index.js - 886 Bytes
    └───/noEmptyChildren
      └───index.d.ts - 1.75 KB
      └───index.js - 3.2 KB
    └───/overrideProps
      └───index.d.ts - 1.61 KB
      └───index.js - 2.35 KB
    └───/removeChildren
      └───index.d.ts - 1.11 KB
      └───index.js - 2.38 KB
    └───/removeChildrenByType
      └───index.d.ts - 3.71 KB
      └───index.js - 5.43 KB
    └───/typeOfComponent
      └───index.d.ts - 614 Bytes
      └───index.js - 1.35 KB
      └───types.d.ts - 249 Bytes
      └───types.js - 12 Bytes
    └───/_private
      └───utils.d.ts - 61 Bytes
      └───utils.js - 398 Bytes