children

Memoizes a props.children getter so that it is read at most once per change of its dependencies. Arrays are flattened, accessors are called, and null, undefined and booleans are dropped. The memo is created in the current owner, so nodes created while resolving are disposed with it. Use it when a component inspects or rearranges its children.

Import#

import { children } from "@shadow-js/core";

Signature#

function children(fn: () => unknown): ResolvedChildren

Parameters#

Returns#

A ResolvedChildren accessor with toArray(), count(), map(), forEach() and only().

Throws#

• TypeError from the returned accessor and its methods when the children contain an array that contains itself (production message SHADOW_CHILDREN_CYCLE) or more than 1000 nested accessors (SHADOW_CHILDREN_LAYERS). only() throws TypeError (SHADOW_CHILDREN_ONLY) unless there is exactly one leaf.

Examples#

import { children } from "@shadow-js/core";

function Steps(props: { children?: unknown }) {
  const steps = children(() => props.children);
  return (
    <ol aria-label={`${steps.count()} steps`}>
      {steps.map((step) => <li>{step as Node | string}</li>)}
    </ol>
  );
}