Friend, have you ever had the need to:
\r\n\r\nIf 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...
\r\n\r\nVersion: 2.0.0
\r\n\r\n| function | \nDescription | \n
|---|---|
| getChild | Gets first child by specified predicate |
| getChildDeep | Gets first child by specified predicate (deep search) |
| getChildByType | 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'. |
| getChildByTypeDeep | 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) |
| getChildren | Gets all children by specified predicate |
| getChildrenDeep | Gets first child by specified predicate (deep search) |
| getChildrenByType | 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'. |
| getChildrenByTypeDeep | 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) |
| noEmptyChildrenDeep | Ensure that there is some level of content and not just a bunch of empty divs, spans, etc (deep search) |
| removeChildren | Removes all children by specified predicate |
| removeChildrenDeep | Removes all children by specified predicate (deep search) |
| removeChildrenByType | 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'. |
| removeChildrenByTypeDeep | 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) |
| 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'. |
Gets first child by specified predicate
\nSince v1.0.0
\n| Param | \nType |
|---|---|
children JSX children | T |
predicate The predicate to determine if the given child is a match | (child: T) => boolean |
Returns: {T} - The first matching child
\r\n\r\nGets first child by specified predicate (deep search)
\nSince v1.0.0
\n| Param | \nType |
|---|---|
children JSX children | T |
predicate The predicate to determine if the given child is a match | (child: T) => boolean |
Returns: {T} - The first matching child
\r\n\r\nGets 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'.
\nSince v1.0.0 (modified v2.0.0)
\n| Param | \nType | Default |
|---|---|---|
children JSX children | T | |
types Types of children to match | any[] | |
{ customTypeKey: boolean = '__TYPE', prioritized: boolean = false } (optional) The configuration params | GetChildByTypeConfig | { customTypeKey: '__TYPE', prioritized: false } |
Returns: {T} - The first matching child
\r\n\r\nGets 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)
\nSince v1.0.0 (modified v2.0.0)
\n| Param | \nType | Default |
|---|---|---|
children JSX children | T | |
types Types of children to match | any[] | |
{ customTypeKey: boolean = '__TYPE', prioritized: boolean = false } (optional) The configuration params | GetChildByTypeConfig | { customTypeKey: '__TYPE', prioritized: false } |
Returns: {T} - The first matching child
\r\n\r\nGets all children by specified predicate
\nSince v1.0.0
\n| Param | \nType |
|---|---|
children JSX children | T |
predicate The predicate to determine if the given child is a match | (child: T) => boolean |
Returns: {T[]} - Array of matching children
\r\n\r\nGets first child by specified predicate (deep search)
\nSince v1.0.0
\n| Param | \nType |
|---|---|
children JSX children | T |
predicate The predicate to determine if the given child is a match | (child: T) => boolean |
Returns: {T} - The first matching child
\r\n\r\nGets 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'.
\nSince v1.0.0 (modified v2.0.0)
\n| Param | \nType | Default |
|---|---|---|
children JSX children | T | |
types Types of children to match | any[] | |
{ customTypeKey: boolean = '__TYPE' } (optional) The configuration params; The custom component prop key to check the type | object | { customTypeKey: '__TYPE' } |
Returns: {T[]} - Array of matching children
\r\n\r\nGets 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)
\nSince v1.0.0 (modified v2.0.0)
\n| Param | \nType | Default |
|---|---|---|
children JSX children | T | |
types Types of children to match | any[] | |
{ customTypeKey: boolean = '__TYPE' } (optional) The configuration params; The custom component prop key to check the type | object | { customTypeKey: '__TYPE' } |
Returns: {T[]} - Array of matching children
\r\n\r\nEnsure that there is some level of content and not just a bunch of empty divs, spans, etc (deep search)
\nSince v1.0.0
\n| Param | \nType | Default |
|---|---|---|
component A component, array of components, or content of a component | any | |
config (optional) Configuration options for custom components | NoEmptyConfig | config |
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
\r\n\r\nRemoves all children by specified predicate
\nSince v1.0.0
\n| Param | \nType |
|---|---|
children JSX children | T |
predicate The predicate to determine if the given child is a match | (child: T) => boolean |
Returns: {T[]} - All non-matching children
\r\n\r\nRemoves all children by specified predicate (deep search)
\nSince v1.0.0
\n| Param | \nType |
|---|---|
children JSX children | T |
predicate The predicate to determine if the given child is a match | (child: T) => boolean |
Returns: {T[]} - All non-matching children
\r\n\r\nRemoves 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'.
\nSince v1.0.0 (modified v2.0.0)
\n| Param | \nType | Default |
|---|---|---|
children JSX children | T | |
types Types of children to match | any[] | |
{ customTypeKey: boolean = '__TYPE' } (optional) The configuration params; The custom component prop key to check the type | object | { customTypeKey: '__TYPE' } |
Returns: {T[]} - All non-matching children
\r\n\r\nRemoves 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)
\nSince v1.0.0 (modified v2.0.0)
\n| Param | \nType | Default |
|---|---|---|
children JSX children | T | |
types Types of children to match | any[] | |
{ customTypeKey: boolean = '__TYPE' } (optional) The configuration params; The custom component prop key to check the type | object | { customTypeKey: '__TYPE' } |
Returns: {T[]} - All non-matching children
\r\n\r\nGets 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'.
\nSince v1.0.0
\n| Param | \nType | Default |
|---|---|---|
component The component to type check | any | |
customTypeKey='__TYPE' (optional) The custom component prop key to check the type | string | '__TYPE' |
Returns: {string} - The string representation of the type
\r\n\r\nFriend, have you ever had the need to:
\r\n\r\nIf 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...
\r\n\r\nVersion: 2.0.0-beta.0
\r\n\r\n| function | \nDescription | \n
|---|---|
| getChild | Gets first child by specified predicate |
| getChildDeep | Gets first child by specified predicate (deep search) |
| getChildByType | 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'. |
| getChildByTypeDeep | 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) |
| getChildren | Gets all children by specified predicate |
| getChildrenDeep | Gets first child by specified predicate (deep search) |
| getChildrenByType | 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'. |
| getChildrenByTypeDeep | 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) |
| noEmptyChildrenDeep | Ensure that there is some level of content and not just a bunch of empty divs, spans, etc (deep search) |
| removeChildren | Removes all children by specified predicate |
| removeChildrenDeep | Removes all children by specified predicate (deep search) |
| removeChildrenByType | 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'. |
| removeChildrenByTypeDeep | 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) |
| 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'. |
Gets first child by specified predicate
\nSince v1.0.0
\n| Param | \nType |
|---|---|
children JSX children | T |
predicate The predicate to determine if the given child is a match | (child: T) => boolean |
Returns: {T} - The first matching child
\r\n\r\nGets first child by specified predicate (deep search)
\nSince v1.0.0
\n| Param | \nType |
|---|---|
children JSX children | T |
predicate The predicate to determine if the given child is a match | (child: T) => boolean |
Returns: {T} - The first matching child
\r\n\r\nGets 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'.
\nSince v1.0.0 (modified v2.0.0)
\n| Param | \nType | Default |
|---|---|---|
children JSX children | T | |
types Types of children to match | any[] | |
{ customTypeKey: boolean = '__TYPE', prioritized: boolean = false } (optional) The configuration params | GetChildByTypeConfig | { customTypeKey: '__TYPE', prioritized: false } |
Returns: {T} - The first matching child
\r\n\r\nGets 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)
\nSince v1.0.0 (modified v2.0.0)
\n| Param | \nType | Default |
|---|---|---|
children JSX children | T | |
types Types of children to match | any[] | |
{ customTypeKey: boolean = '__TYPE', prioritized: boolean = false } (optional) The configuration params | GetChildByTypeConfig | { customTypeKey: '__TYPE', prioritized: false } |
Returns: {T} - The first matching child
\r\n\r\nGets all children by specified predicate
\nSince v1.0.0
\n| Param | \nType |
|---|---|
children JSX children | T |
predicate The predicate to determine if the given child is a match | (child: T) => boolean |
Returns: {T[]} - Array of matching children
\r\n\r\nGets first child by specified predicate (deep search)
\nSince v1.0.0
\n| Param | \nType |
|---|---|
children JSX children | T |
predicate The predicate to determine if the given child is a match | (child: T) => boolean |
Returns: {T} - The first matching child
\r\n\r\nGets 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'.
\nSince v1.0.0 (modified v2.0.0)
\n| Param | \nType | Default |
|---|---|---|
children JSX children | T | |
types Types of children to match | any[] | |
{ customTypeKey: boolean = '__TYPE' } (optional) The configuration params; The custom component prop key to check the type | object | { customTypeKey: '__TYPE' } |
Returns: {T[]} - Array of matching children
\r\n\r\nGets 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)
\nSince v1.0.0 (modified v2.0.0)
\n| Param | \nType | Default |
|---|---|---|
children JSX children | T | |
types Types of children to match | any[] | |
{ customTypeKey: boolean = '__TYPE' } (optional) The configuration params; The custom component prop key to check the type | object | { customTypeKey: '__TYPE' } |
Returns: {T[]} - Array of matching children
\r\n\r\nEnsure that there is some level of content and not just a bunch of empty divs, spans, etc (deep search)
\nSince v1.0.0
\n| Param | \nType | Default |
|---|---|---|
component A component, array of components, or content of a component | any | |
config (optional) Configuration options for custom components | NoEmptyConfig | config |
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
\r\n\r\nRemoves all children by specified predicate
\nSince v1.0.0
\n| Param | \nType |
|---|---|
children JSX children | T |
predicate The predicate to determine if the given child is a match | (child: T) => boolean |
Returns: {T[]} - All non-matching children
\r\n\r\nRemoves all children by specified predicate (deep search)
\nSince v1.0.0
\n| Param | \nType |
|---|---|
children JSX children | T |
predicate The predicate to determine if the given child is a match | (child: T) => boolean |
Returns: {T[]} - All non-matching children
\r\n\r\nRemoves 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'.
\nSince v1.0.0 (modified v2.0.0)
\n| Param | \nType | Default |
|---|---|---|
children JSX children | T | |
types Types of children to match | any[] | |
{ customTypeKey: boolean = '__TYPE' } (optional) The configuration params; The custom component prop key to check the type | object | { customTypeKey: '__TYPE' } |
Returns: {T[]} - All non-matching children
\r\n\r\nRemoves 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)
\nSince v1.0.0 (modified v2.0.0)
\n| Param | \nType | Default |
|---|---|---|
children JSX children | T | |
types Types of children to match | any[] | |
{ customTypeKey: boolean = '__TYPE' } (optional) The configuration params; The custom component prop key to check the type | object | { customTypeKey: '__TYPE' } |
Returns: {T[]} - All non-matching children
\r\n\r\nGets 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'.
\nSince v1.0.0
\n| Param | \nType | Default |
|---|---|---|
component The component to type check | any | |
customTypeKey='__TYPE' (optional) The custom component prop key to check the type | string | '__TYPE' |
Returns: {string} - The string representation of the type
\r\n\r\nHello friend. Have you ever had the need to:
\r\n\r\nIf 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...
\r\n\r\nVersion: 2.2.0-beta.0
\r\n\r\nFor detailed information on each util, see below this table.
\n| function | \nDescription | \n
|---|---|
| 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 first child by specified predicate (deep search) |
| getChildrenByType | Gets all children by specified type |
| getChildrenByTypeDeep | Gets all children by specified type (deep search) |
| noEmptyChildrenDeep | Ensure that there is some level of content and not just a bunch of empty divs, spans, etc (deep search) |
| 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 |
Gets first child by specified predicate
\nSince v1.0.0
\n| Param | \nType |
|---|---|
children JSX children | T |
predicate The predicate to determine if the given child is a match | (child: T) => boolean |
Returns: {T} - The first matching child
\nGets first child by specified predicate (deep search)
\nSince v1.0.0
\n| Param | \nType |
|---|---|
children JSX children | T |
predicate The predicate to determine if the given child is a match | (child: T) => boolean |
Returns: {T} - The first matching child
\nGets first child by specified type
\nSince v1.0.0 (modified v2.0.0)
\n| Param | \nType |
|---|---|
children JSX children | T |
types Types of children to match | any[] |
{ customTypeKey: '__TYPE', prioritized: false } (optional) The configuration params | GetChildByTypeConfig |
Returns: {T} - The first matching child
This function will check the prop {customTypeKey} first and then component.type to match core html (JSX intrinsic) elements or component functions. To find a React Fragment, search for 'react.fragment'.
Gets first child by specified type (deep search)
\nSince v1.0.0 (modified v2.0.0)
\n| Param | \nType |
|---|---|
children JSX children | T |
types Types of children to match | any[] |
{ customTypeKey: '__TYPE', prioritized: false } (optional) The configuration params | GetChildByTypeConfig |
Returns: {T} - The first matching child
This function will check the prop {customTypeKey} first and then component.type to match core html (JSX intrinsic) elements or component functions. To find a React Fragment, search for 'react.fragment'.
Gets all children by specified predicate
\nSince v1.0.0
\n| Param | \nType |
|---|---|
children JSX children | T |
predicate The predicate to determine if the given child is a match | (child: T) => boolean |
Returns: {T[]} - Array of matching children
\nGets first child by specified predicate (deep search)
\nSince v1.0.0
\n| Param | \nType |
|---|---|
children JSX children | T |
predicate The predicate to determine if the given child is a match | (child: T) => boolean |
Returns: {T} - The first matching child
\nGets all children by specified type
\nSince v1.0.0 (modified v2.0.0)
\n| Param | \nType |
|---|---|
children JSX children | T |
types Types of children to match | any[] |
{ customTypeKey: '__TYPE' } (optional) The configuration params | GetChildrenByTypeConfig |
Returns: {T[]} - Array of matching children
This function will check the prop {customTypeKey} first and then component.type to match core html (JSX intrinsic) elements or component functions. To find a React Fragment, search for 'react.fragment'.
Gets all children by specified type (deep search)
\nSince v1.0.0 (modified v2.0.0)
\n| Param | \nType |
|---|---|
children JSX children | T |
types Types of children to match | any[] |
{ customTypeKey: '__TYPE' } (optional) The configuration params | GetChildrenByTypeConfig |
Returns: {T[]} - Array of matching children
This function will check the prop {customTypeKey} first and then component.type to match core html (JSX intrinsic) elements or component functions. To find a React Fragment, search for 'react.fragment'.
Ensure that there is some level of content and not just a bunch of empty divs, spans, etc (deep search)
\nSince v1.0.0
\n| Param | \nType | Default |
|---|---|---|
component A component, array of components, or content of a component | any | |
config (optional) Configuration options for custom components | NoEmptyConfig | config |
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
Removes all children by specified predicate
\nSince v1.0.0
\n| Param | \nType |
|---|---|
children JSX children | T |
predicate The predicate to determine if the given child is a match | (child: T) => boolean |
Returns: {T[]} - All non-matching children
\nRemoves all children by specified predicate (deep search)
\nSince v1.0.0
\n| Param | \nType |
|---|---|
children JSX children | T |
predicate The predicate to determine if the given child is a match | (child: T) => boolean |
Returns: {T[]} - All non-matching children
\nRemoves all children by specified type
\nSince v1.0.0 (modified v2.0.0)
\n| Param | \nType |
|---|---|
children JSX children | T |
types Types of children to match | any[] |
{ customTypeKey: '__TYPE' } (optional) The configuration params | RemoveChildrenByTypeConfig |
Returns: {T[]} - All non-matching children
\nThis function will check the prop {customTypeKey} first and then component.type to match core html (JSX intrinsic) elements or component functions. To remove a React Fragment, search for 'react.fragment'.
Removes all children by specified type (deep search)
\nSince v1.0.0 (modified v2.0.0)
\n| Param | \nType |
|---|---|
children JSX children | T |
types Types of children to match | any[] |
{ customTypeKey: '__TYPE' } (optional) The configuration params | RemoveChildrenByTypeConfig |
Returns: {T[]} - All non-matching children
\nThis function will check the prop {customTypeKey} first and then component.type to match core html (JSX intrinsic) elements or component functions. To remove a React Fragment, search for 'react.fragment'.
Gets the string type of the component's {customTypeKey}, string type of the core html (JSX intrinsic) element, or the function type
\nSince v1.0.0
\n| Param | \nType | Default |
|---|---|---|
component The component to type check | any | |
customTypeKey (optional) The custom component prop key to check the type | string | '__TYPE' |
Returns: {string} - The string representation of the type
\nReact Fragments will return type 'react.fragment'. Priority will be given to the {customTypeKey} if one exists
Hello friend. Have you ever had the need to:
\r\n\r\nIf 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...
\r\n\r\nVersion: 2.3.0-beta.0
\r\n\r\nFor detailed information on each util, see below this table.
\n| function | \nDescription | \n
|---|---|
| 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 first child by specified predicate (deep search) |
| getChildrenByType | Gets all children by specified type |
| getChildrenByTypeDeep | Gets all children by specified type (deep search) |
| modifyChildProps | Immutably modifies props of the children of the component |
| noEmptyChildrenDeep | Ensure that there is some level of content and not just a bunch of empty divs, spans, etc (deep search) |
| 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 |
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.
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:
\r\n\r\n```\r\nimport React from 'react';\r\n\r\nconst Hello = ({ __TYPE }) =>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
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:
customTypeKey, check out my Medium article: Find & Filter React Children By Type\r\n\r\nNow, without further ado, the utils...
Gets first child by specified predicate
\nSince v1.0.0
\n| Param | \nType |
|---|---|
children JSX children | T |
predicate The predicate to determine if the given child is a match | (child: T) => boolean |
Returns: {T} - The first matching child
\nGets first child by specified predicate (deep search)
\nSince v1.0.0
\n| Param | \nType |
|---|---|
children JSX children | T |
predicate The predicate to determine if the given child is a match | (child: T) => boolean |
Returns: {T} - The first matching child
\nGets first child by specified type
\nSince v1.0.0 (modified v2.0.0)
\n| Param | \nType |
|---|---|
children JSX children | T |
types Types of children to match | any[] |
{ customTypeKey: '__TYPE', prioritized: false } (optional) The configuration params | GetChildByTypeConfig |
Returns: {T} - The first matching child
This function will check the prop {customTypeKey} first and then component.type to match core html (JSX intrinsic) elements or component functions. To find a React Fragment, search for 'react.fragment'.
Gets first child by specified type (deep search)
\nSince v1.0.0 (modified v2.0.0)
\n| Param | \nType |
|---|---|
children JSX children | T |
types Types of children to match | any[] |
{ customTypeKey: '__TYPE', prioritized: false } (optional) The configuration params | GetChildByTypeConfig |
Returns: {T} - The first matching child
This function will check the prop {customTypeKey} first and then component.type to match core html (JSX intrinsic) elements or component functions. To find a React Fragment, search for 'react.fragment'.
Gets all children by specified predicate
\nSince v1.0.0
\n| Param | \nType |
|---|---|
children JSX children | T |
predicate The predicate to determine if the given child is a match | (child: T) => boolean |
Returns: {T[]} - Array of matching children
\nGets first child by specified predicate (deep search)
\nSince v1.0.0
\n| Param | \nType |
|---|---|
children JSX children | T |
predicate The predicate to determine if the given child is a match | (child: T) => boolean |
Returns: {T} - The first matching child
\nGets all children by specified type
\nSince v1.0.0 (modified v2.0.0)
\n| Param | \nType |
|---|---|
children JSX children | T |
types Types of children to match | any[] |
{ customTypeKey: '__TYPE' } (optional) The configuration params | GetChildrenByTypeConfig |
Returns: {T[]} - Array of matching children
This function will check the prop {customTypeKey} first and then component.type to match core html (JSX intrinsic) elements or component functions. To find a React Fragment, search for 'react.fragment'.
Gets all children by specified type (deep search)
\nSince v1.0.0 (modified v2.0.0)
\n| Param | \nType |
|---|---|
children JSX children | T |
types Types of children to match | any[] |
{ customTypeKey: '__TYPE' } (optional) The configuration params | GetChildrenByTypeConfig |
Returns: {T[]} - Array of matching children
This function will check the prop {customTypeKey} first and then component.type to match core html (JSX intrinsic) elements or component functions. To find a React Fragment, search for 'react.fragment'.
Immutably modifies props of the children of the component
\nThis function is a handy shortcut for when you may need to override the props of your children components and is an alternative for writing your own looped React.cloneElement calls.
Since v2.3.0
\n| Param | \nType | Default |
|---|---|---|
component The component whose children you want to modify | React.ReactElement | |
callback Types of children to match | <T=any>(child: T, index?: number) => Record<string, unknown> | |
selfProps (optional) Any other props to modify on the original component | object | selfProps |
Returns: {React.ReactElement} The original component with the children with modified prop values
\nEnsure that there is some level of content and not just a bunch of empty divs, spans, etc (deep search)
\nSince v1.0.0
\n| Param | \nType | Default |
|---|---|---|
component A component, array of components, or content of a component | any | |
config (optional) Configuration options for custom components | NoEmptyConfig | config |
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
Removes all children by specified predicate
\nSince v1.0.0
\n| Param | \nType |
|---|---|
children JSX children | T |
predicate The predicate to determine if the given child is a match | (child: T) => boolean |
Returns: {T[]} - All non-matching children
\nRemoves all children by specified predicate (deep search)
\nSince v1.0.0
\n| Param | \nType |
|---|---|
children JSX children | T |
predicate The predicate to determine if the given child is a match | (child: T) => boolean |
Returns: {T[]} - All non-matching children
\nRemoves all children by specified type
\nSince v1.0.0 (modified v2.0.0)
\n| Param | \nType |
|---|---|
children JSX children | T |
types Types of children to match | any[] |
{ customTypeKey: '__TYPE' } (optional) The configuration params | RemoveChildrenByTypeConfig |
Returns: {T[]} - All non-matching children
\nThis function will check the prop {customTypeKey} first and then component.type to match core html (JSX intrinsic) elements or component functions. To remove a React Fragment, search for 'react.fragment'.
Removes all children by specified type (deep search)
\nSince v1.0.0 (modified v2.0.0)
\n| Param | \nType |
|---|---|
children JSX children | T |
types Types of children to match | any[] |
{ customTypeKey: '__TYPE' } (optional) The configuration params | RemoveChildrenByTypeConfig |
Returns: {T[]} - All non-matching children
\nThis function will check the prop {customTypeKey} first and then component.type to match core html (JSX intrinsic) elements or component functions. To remove a React Fragment, search for 'react.fragment'.
Gets the string type of the component's {customTypeKey}, string type of the core html (JSX intrinsic) element, or the function type
\nSince v1.0.0
\n| Param | \nType | Default |
|---|---|---|
component The component to type check | any | |
customTypeKey (optional) The custom component prop key to check the type | string | '__TYPE' |
Returns: {string} - The string representation of the type
\nReact Fragments will return type 'react.fragment'. Priority will be given to the {customTypeKey} if one exists
Hello friend. Have you ever had the need to:
\r\n\r\nIf 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...
\r\n\r\nVersion: 2.3.0-beta.1
\r\n\r\nFor detailed information on each util, see below this table.
\n| function | \nDescription | \n
|---|---|
| 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 first child by specified predicate (deep search) |
| getChildrenByType | Gets all children by specified type |
| getChildrenByTypeDeep | Gets all children by specified type (deep search) |
| 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 |
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.
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:
\r\n\r\n```\r\nimport React from 'react';\r\n\r\nconst Hello = ({ __TYPE }) =>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
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:
customTypeKey, check out my Medium article: Find & Filter React Children By Type\r\n\r\nNow, without further ado, the utils...
Gets first child by specified predicate
\nSince v1.0.0
\n| Param | \nType |
|---|---|
children JSX children | T |
predicate The predicate to determine if the given child is a match | (child: T) => boolean |
Returns: {T} - The first matching child
\nGets first child by specified predicate (deep search)
\nSince v1.0.0
\n| Param | \nType |
|---|---|
children JSX children | T |
predicate The predicate to determine if the given child is a match | (child: T) => boolean |
Returns: {T} - The first matching child
\nGets first child by specified type
\nSince v1.0.0 (modified v2.0.0)
\n| Param | \nType |
|---|---|
children JSX children | T |
types Types of children to match | any[] |
{ customTypeKey: '__TYPE', prioritized: false } (optional) The configuration params | GetChildByTypeConfig |
Returns: {T} - The first matching child
This function will check the prop {customTypeKey} first and then component.type to match core html (JSX intrinsic) elements or component functions. To find a React Fragment, search for 'react.fragment'.
GetChildByTypeConfig is a TypeScript type and is only for (optional) use with TypeScript projects
Gets first child by specified type (deep search)
\nSince v1.0.0 (modified v2.0.0)
\n| Param | \nType |
|---|---|
children JSX children | T |
types Types of children to match | any[] |
{ customTypeKey: '__TYPE', prioritized: false } (optional) The configuration params | GetChildByTypeConfig |
Returns: {T} - The first matching child
This function will check the prop {customTypeKey} first and then component.type to match core html (JSX intrinsic) elements or component functions. To find a React Fragment, search for 'react.fragment'.
GetChildByTypeConfig is a TypeScript type and is only for (optional) use with TypeScript projects
Gets all children by specified predicate
\nSince v1.0.0
\n| Param | \nType |
|---|---|
children JSX children | T |
predicate The predicate to determine if the given child is a match | (child: T) => boolean |
Returns: {T[]} - Array of matching children
\nGets first child by specified predicate (deep search)
\nSince v1.0.0
\n| Param | \nType |
|---|---|
children JSX children | T |
predicate The predicate to determine if the given child is a match | (child: T) => boolean |
Returns: {T} - The first matching child
\nGets all children by specified type
\nSince v1.0.0 (modified v2.0.0)
\n| Param | \nType |
|---|---|
children JSX children | T |
types Types of children to match | any[] |
{ customTypeKey: '__TYPE' } (optional) The configuration params | GetChildrenByTypeConfig |
Returns: {T[]} - Array of matching children
This function will check the prop {customTypeKey} first and then component.type to match core html (JSX intrinsic) elements or component functions. To find a React Fragment, search for 'react.fragment'.
GetChildrenByTypeConfig is a TypeScript type and is only for (optional) use with TypeScript projects
Gets all children by specified type (deep search)
\nSince v1.0.0 (modified v2.0.0)
\n| Param | \nType |
|---|---|
children JSX children | T |
types Types of children to match | any[] |
{ customTypeKey: '__TYPE' } (optional) The configuration params | GetChildrenByTypeConfig |
Returns: {T[]} - Array of matching children
This function will check the prop {customTypeKey} first and then component.type to match core html (JSX intrinsic) elements or component functions. To find a React Fragment, search for 'react.fragment'.
GetChildrenByTypeConfig is a TypeScript type and is only for (optional) use with TypeScript projects
Ensure that there is some level of content and not just a bunch of empty divs, spans, etc (deep search)
\nSince v1.0.0
\n| Param | \nType | Default |
|---|---|---|
component A component, array of components, or content of a component | any | |
config (optional) Configuration options for custom components | NoEmptyConfig | config |
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
Immutably override props of the children of the original component and (optionally) the original component
\nThis function is a handy shortcut for when you may need to override the props of your children components and is an alternative for writing your own looped React.cloneElement calls.
Since v2.3.0
\n| Param | \nType | Default |
|---|---|---|
component The component whose children you want to modify | React.ReactElement | |
getChildOverrides Callback function that returns an object containing the props you wish to override for each child | <T=any>(child: T, index?: number) => object | |
overrides (optional) Any other props to override on the original component | object | overrides |
Returns: {React.ReactElement} The original component with the children with modified prop values
\nRemoves all children by specified predicate
\nSince v1.0.0
\n| Param | \nType |
|---|---|
children JSX children | T |
predicate The predicate to determine if the given child is a match | (child: T) => boolean |
Returns: {T[]} - All non-matching children
\nRemoves all children by specified predicate (deep search)
\nSince v1.0.0
\n| Param | \nType |
|---|---|
children JSX children | T |
predicate The predicate to determine if the given child is a match | (child: T) => boolean |
Returns: {T[]} - All non-matching children
\nRemoves all children by specified type
\nSince v1.0.0 (modified v2.0.0)
\n| Param | \nType |
|---|---|
children JSX children | T |
types Types of children to match | any[] |
{ customTypeKey: '__TYPE' } (optional) The configuration params | RemoveChildrenByTypeConfig |
Returns: {T[]} - All non-matching children
\nThis function will check the prop {customTypeKey} first and then component.type to match core html (JSX intrinsic) elements or component functions. To remove a React Fragment, search for 'react.fragment'.
RemoveChildrenByTypeConfig is a TypeScript type and is only for (optional) use with TypeScript projects
Removes all children by specified type (deep search)
\nSince v1.0.0 (modified v2.0.0)
\n| Param | \nType |
|---|---|
children JSX children | T |
types Types of children to match | any[] |
{ customTypeKey: '__TYPE' } (optional) The configuration params | RemoveChildrenByTypeConfig |
Returns: {T[]} - All non-matching children
\nThis function will check the prop {customTypeKey} first and then component.type to match core html (JSX intrinsic) elements or component functions. To remove a React Fragment, search for 'react.fragment'.
RemoveChildrenByTypeConfig is a TypeScript type and is only for (optional) use with TypeScript projects
Gets the string type of the component's {customTypeKey}, string type of the core html (JSX intrinsic) element, or the function type
\nSince v1.0.0
\n| Param | \nType | Default |
|---|---|---|
component The component to type check | any | |
customTypeKey (optional) The custom component prop key to check the type | string | '__TYPE' |
Returns: {string} - The string representation of the type
\nReact Fragments will return type 'react.fragment'. Priority will be given to the {customTypeKey} if one exists
Hello friend. Have you ever had the need to:
\r\n\r\nIf 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...
\r\n\r\nVersion: 2.15.0
\r\n\r\nreact-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.\r\n\r\nThis is simple example of how you can program defensively (your consumer can't just throw anything unexpected in children and have it render) and it shows how you can manipulate your children to place them anywhere in the rendered output.
\r\n\r\nBelow, we have a ToDo list of Items. We first get all child Items—all other children will be ignored. We then find two lists of children that are completed and incomplete.
| function | \nDescription | \n
|---|---|
| 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 |
| overridePropsDeep | Immutably override props of the children and all descendants (deep) |
| 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 |
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.
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:
\r\n\r\n```\r\nimport React from 'react';\r\n\r\nconst Hello = ({ __TYPE }) =>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
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:
customTypeKey, check out my Medium article: Find & Filter React Children By Type\r\n\r\n\r\nBecause React.forwardRef components are higher order components, determining their type becomes tricky. The only way to reliably determine their type is to use the customTypeKey method outlined above.