react-nanny

Utils to manage your React Children

Installation

$ npm install react-nanny --save

getChild<T=React.ReactNode>

Gets first child by specified predicate

Since v1.0.0

Returns: {T} - The first matching child

Import

import { getChild } from react-nanny';

Examples

// Finds the first occurrence of a child that has a prop of 'active' set to true
 getChild(children, child => child.props.active);

getChildDeep<T=React.ReactNode>

Gets first child by specified predicate (deep search)

Since v1.0.0

Returns: {T} - The first matching child

Import

import { getChildDeep } from react-nanny';

Examples

// Finds the first occurrence of a child that has a prop of 'active' set to true
 getChildDeep(children, child => child.props.active);

getChildByType<T=React.ReactNode>

Gets first child by specified type. This function will check the prop {customTypeKey} first and then the 'type' string to match core html elements. To find a React Fragment, search for type 'react.fragment'.

Since v1.0.0

Returns: {T} - The first matching child

Import

import { getChildByType } from react-nanny';

Examples

// Finds the first occurrence of either a ToDo (custom component), a div, or a React Fragment
 getChildByType(children, ['ToDo', 'div', 'react.fragment']);

getChildByTypeDeep<T=React.ReactNode>

Gets first child by specified type. This function will check the prop {customTypeKey} first and then the 'type' string to match core html elements. To find a React Fragment, search for type 'react.fragment'. (deep search)

Since v1.0.0

Returns: {T} - The first matching child

Import

import { getChildByTypeDeep } from react-nanny';

Examples

// Finds the first occurrence of either a ToDo (custom component), a div, or a React Fragment
 getChildByTypeDeep(children, ['ToDo', 'div', 'react.fragment']);

getChildren<T=React.ReactNode>

Gets all children by specified predicate

Since v1.0.0

Returns: {T[]} - Array of matching children

Import

import { getChildren } from react-nanny';

Examples

// Finds all children that have an 'active' prop set to true
 getChildren(children, child => child.props.active);

getChildrenDeep<T=React.ReactNode>

Gets first child by specified predicate (deep search)

Since v1.0.0

Returns: {T} - The first matching child

Import

import { getChildrenDeep } from react-nanny';

Examples

// Finds the first occurrence of a child that has a prop of 'active' set to true
 getChildDeep(children, child => child.props.active);

getChildrenByType<T=React.ReactNode>

Gets all children by specified type. This function will check the prop {customTypeKey} first and then the 'type' string to match core html elements. To find a React Fragment, search for type 'react.fragment'.

Since v1.0.0

Returns: {T[]} - Array of matching children

Import

import { getChildrenByType } from react-nanny';

Examples

// Finds all occurrences of ToDo (custom component), div, and React Fragment
 getChildrenByType(children, ['ToDo', 'div', 'react.fragment']);

getChildrenByTypeDeep<T=React.ReactNode>

Gets all children by specified type. This function will check the prop {customTypeKey} first and then the 'type' string to match core html elements. To find a React Fragment, search for type 'react.fragment'. (deep search)

Since v1.0.0

Returns: {T[]} - Array of matching children

Import

import { getChildrenByTypeDeep } from react-nanny';

Examples

// Finds all occurrences of ToDo (custom component), div, and React Fragment
 getChildrenByTypeDeep(children, ['ToDo', 'div', 'react.fragment']);

noEmptyChildrenDeep

Ensure that there is content by no empty children (deep search)

Since v1.0.0

Returns: {boolean} - Whether or not there is content provided. true = content is provided as children at some depth; false = no content is provided as children at any depth

Import

import { noEmptyChildrenDeep } from react-nanny';

Examples

noEmptyChildrenDeep(component, { ignore: ['CustomComponent'], rejectCustom: false, rejectEmptyCustom: true })

removeChildren<T=React.ReactNode>

Removes all children by specified predicate

Since v1.0.0

Returns: {T[]} - All non-matching children

Import

import { removeChildren } from react-nanny';

Examples

// Removes all children that have an 'active' prop set to false
 removeChildren(children, child => !child.props.active);

removeChildrenDeep<T=React.ReactNode>

Removes all children by specified predicate (deep search)

Since v1.0.0

Returns: {T[]} - All non-matching children

Import

import { removeChildrenDeep } from react-nanny';

Examples

// Removes all children that have an 'active' prop set to false
 removeChildrenDeep(children, child => !child.props.active);

removeChildrenByType<T=React.ReactNode>

Removes all children by specified type. This function will check the prop {customTypeKey} first and then the 'type' string to match core html elements. To remove a React Fragment, use type 'react.fragment'.

Since v1.0.0

Returns: {T[]} - All non-matching children

Import

import { removeChildrenByType } from react-nanny';

Examples

// Removes all occurrences of ToDo (custom component), div, and React Fragment
 removeChildrenByType(children, ['ToDo', 'div', 'react.fragment']);

removeChildrenByTypeDeep<T=React.ReactNode>

Removes all children by specified type. This function will check the prop {customTypeKey} first and then the 'type' string to match core html elements. To remove a React Fragment, use type 'react.fragment'. (deep search)

Since v1.0.0

Returns: {T[]} - All non-matching children

Import

import { removeChildrenByTypeDeep } from react-nanny';

Examples

// Removes all occurrences of ToDo (custom component), div, and React Fragment
 removeChildrenByTypeDeep(children, ['ToDo', 'div', 'react.fragment']);

typeOfComponent

Gets the string type of the component or core html (JSX) element. React Fragments will return type 'react.fragment'. Priority will be given to the prop '__TYPE'.

Since v1.0.0

Returns: {string} - The string representation of the type

Import

import { typeOfComponent } from react-nanny';

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.78 KB
    └───/getChildByType
      └───index.d.ts - 1.6 KB
      └───index.js - 2.68 KB
    └───/getChildren
      └───index.d.ts - 1.1 KB
      └───index.js - 2.16 KB
    └───/getChildrenByType
      └───index.d.ts - 1.59 KB
      └───index.js - 3.05 KB
      └───index.d.ts - 559 Bytes
      └───index.js - 2.78 KB
    └───/noEmptyChildren
      └───index.d.ts - 838 Bytes
      └───index.js - 2.44 KB
    └───/removeChildren
      └───index.d.ts - 1.11 KB
      └───index.js - 3.01 KB
    └───/removeChildrenByType
      └───index.d.ts - 1.6 KB
      └───index.js - 3.87 KB
    └───/typeOfComponent
      └───index.d.ts - 503 Bytes
      └───index.js - 1.14 KB
  └───/es6
    └───/getChild
      └───index.d.ts - 1.1 KB
      └───index.js - 1.6 KB
    └───/getChildByType
      └───index.d.ts - 1.6 KB
      └───index.js - 2.42 KB
    └───/getChildren
      └───index.d.ts - 1.1 KB
      └───index.js - 1.96 KB
    └───/getChildrenByType
      └───index.d.ts - 1.59 KB
      └───index.js - 2.77 KB
      └───index.d.ts - 559 Bytes
      └───index.js - 544 Bytes
    └───/noEmptyChildren
      └───index.d.ts - 838 Bytes
      └───index.js - 2.21 KB
    └───/removeChildren
      └───index.d.ts - 1.11 KB
      └───index.js - 2.78 KB
    └───/removeChildrenByType
      └───index.d.ts - 1.6 KB
      └───index.js - 3.57 KB
    └───/typeOfComponent
      └───index.d.ts - 503 Bytes
      └───index.js - 1012 Bytes

License

ISC

Author

Dependencies