Wrap

Props

Usage

The array is read outermost first, so it reflects the nesting exactly as you would have typed it. That order is not cosmetic: providers usually depend on the ones above them, and a list that reads top down keeps that dependency visible instead of hiding it in indentation.

<Wrap components={[StoreProvider, ThemeProvider, RouterProvider]}>
  <App />
</Wrap>

<StoreProvider>
  <ThemeProvider>
    <RouterProvider>
      <App />
    </RouterProvider>
  </ThemeProvider>
</StoreProvider>

<Wrap components={[]}>{children}</Wrap>

Wrappers with props

The element form lets a wrapper take props, which the component form cannot.

<Wrap components={[<ThemeProvider theme="dark" />, StoreProvider]}>
  <App />
</Wrap>

A wrapper passed as an element has its own children replaced, so Wrap always stays in control of what it wraps. Writing children inside that element is not an error — they are simply discarded, because the only children a wrapper can have are the ones the fold hands it.

children stays a plain ReactNode

Unlike the conditional primitives, children here is a ReactNode and not a Renderable. Wrap always renders them: there is no branch in which they are withheld, so there would be nothing to gain from deferring their evaluation, and a component form would only add a way to get it wrong.

Folding from the right

is the same tree as:

The nesting is built by folding the array from the right, each wrapper receiving the result of the previous step as its children. An empty array is therefore not a special case — it folds to the children themselves, and Wrap disappears from the tree.