ConditionalProvider

When to use

App or module root when a provider only applies to certain user types or states (e.g. NikeStoreProvider only when the user has an assigned store).

When NOT to use

Per-request or per-interaction toggling — use state + conditional rendering instead. Per-provider loggedIn props already handle auth gating; use ConditionalProvider for structural presence/absence of the provider itself.

Common pitfalls

• Children are always mounted. condition only controls whether the wrapper provider is included — it does not unmount children.
• Do not nest multiple ConditionalProviders to replace a single well-structured provider tree — it reduces readability without adding value.

Props

Auto-generated from src/providers/ConditionalProvider/ConditionalProvider.types.ts. Do not edit by hand. Run pnpm docs:props after changing source JSDoc.

ConditionalProviderProps

Props for ConditionalProvider. Use when a provider should only be mounted for a subset of users or states (e.g. NikeStoreProvider only when the user has a store context). Avoids duplicating the children subtree in a ternary.

Prop	Type	Required	Description
children	ReactNode	Yes	Children rendered inside (or without) the provider.
condition	boolean	Yes	When true the wrapper function is called and children are rendered inside the provider. When false children are rendered directly.
wrapper	(children: ReactNode) => ReactNode	Yes	A function that receives children and wraps them in the target provider. Only called when condition is true.

Examples

Conditionally mount NikeStoreProvider

Mount NikeStoreProvider only when the user has an assigned store (e.g. not for corporate users without a store context).

import { ConditionalProvider, NikeStoreProvider } from '@nike/whisker-component-library';

<ConditionalProvider
  condition={hasStoreContext}
  wrapper={(children) => (
    <NikeStoreProvider storeId={storeId} loggedIn={isLoggedIn} accessToken={accessToken}>
      {children}
    </NikeStoreProvider>
  )}
>
  <App />
</ConditionalProvider>;