React Element Utility Suite

Build a small utility module that leverages the dependency's React element toolkit to sanitize children, extract props from specific components, and render item lists with stable performance characteristics.

Capabilities

Normalize renderable children

• It turns a mixed ReactNode tree (elements, fragments, text, null/undefined/booleans) into an ordered array of renderable entries that preserves keys for elements and keeps plain strings. @test
• It filters out null, undefined, false, true, and empty fragments entirely while flattening nested fragments. @test

Collect props by component name

• It extracts shallow prop objects for child elements whose component/display name matches a provided string, preserving order and ignoring non-elements. @test

Memoized slot renderer

• The SlotRenderer component renders a list of items using a render callback, shows a fallback element when the list is empty, and avoids re-rendering slots when neither items nor render change. @test
• When any item identity changes, only the changed item's rendered element updates while others remain referentially stable. @test

Implementation

@generates

API

import type { Key, ReactElement, ReactNode } from "react";

export type NormalizedChild =
  | { kind: "element"; element: ReactElement; key: Key | null }
  | { kind: "text"; text: string };

export function normalizeChildren(input: ReactNode): NormalizedChild[];

export function collectPropsByName(
  children: ReactNode,
  componentName: string
): Record<string, unknown>[];

export interface SlotRendererProps<T> {
  items: readonly T[];
  render: (item: T, index: number) => ReactElement;
  fallback?: ReactElement;
}

export function SlotRenderer<T>(props: SlotRendererProps<T>): ReactElement;

Dependencies { .dependencies }

@remirror/react { .dependency }

Provides React element inspection, child mapping/cloning, stable callback utilities, and performance wrappers required for this task.