createMapper()function

createMapper(defaults: Mapping<E> = {}): [Mapping: FunctionComponent<MappingProps<E>>, Mapper: FunctionComponent<MapperProps<E>>]

Param	Type
`defaults`	`Mapping<E>`	The initial mapping of element types to renderer components. Defaults to `{}`

Return
`[Mapping: FunctionComponent<MappingProps<E>>, Mapper: FunctionComponent<MapperProps<E>>]`	A `[Mapping, Mapper]` tuple of components sharing a private context.

Create a [Mapping, Mapper] pair of components backed by their own private React context.

Mapping extends or overrides the mapping inside a subtree (useful for swapping in custom renderers for specific element types).
Mapper accepts a pre-walked iterable of elements as children and dispatches each to the registered component for its type. Any other props passed to Mapper are spread onto every dispatched child.

Each call creates its own context — independent mappers don't interfere with each other.

@typeParam E The shape of any extra props the mapper threads through to every dispatched child. Defaults to unknown (no extras).

Examples

// No extras:
const [TreeCardMapping, TreeCardMapper] = createMapper({
  "tree-element": TreeCard,
});
<TreeCardMapper>{walkElements(children)}</TreeCardMapper>

// With extras (`path` threaded into every dispatched child):
const [TreeMenuMapping, TreeMenuMapper] = createMapper<{ path?: AbsolutePath }>({
  "tree-element": TreeMenuItem,
});
<TreeMenuMapper path="/foo">{queryElements(children, query)}</TreeMenuMapper>