Inject
Renders a set of renderables before or after the children, without wrapping them. For the siblings a layout drags along — backgrounds, overlays, portals' anchors.
API
Props
| prop | type | default | |
|---|---|---|---|
components? | Renderable[] | [] | rendered as siblings of the children |
onTop? | boolean | false | render them before the children instead of after |
children? | ReactNode | — | the children, rendered as they are |
Examples
Usage
Inject is the sibling counterpart of Wrap: same array of renderables, but they are placed next to the children instead of around them. Use it for the parts a layout carries without owning — backgrounds, overlays, the anchor a portal renders into — where wrapping would introduce a DOM node that the layout does not want.
<Inject components={[Background, Cursor]} onTop>
<Page />
</Inject>Details
Order and identity
The injected renderables keep the order of the array, each wrapped in a fragment keyed by its index. The array is therefore expected to be static, in the same way a component's JSX is: reordering it across renders would remount the injected subtrees, since their identity is the position, not the content.
children stays a plain ReactNode
As in Wrap, children is a ReactNode: they always render, unconditionally, so there is nothing to defer. Only the injected siblings are Renderables, because those are the ones that may be composed, replaced or left out.
Why onTop is about painting
onTop puts them before the children in document order, which is what you want for a background: earlier siblings paint first, so a later child sits above it without anyone touching z-index.