Blueprint provider

BlueprintProvider combines Blueprint's three context providers in the right order. ClawscaleProvider already renders it, so most apps never use it directly.

Usage#

import { BlueprintProvider } from "@clawscale/react";

What it combines#

BlueprintProvider nests these providers, outermost first:

1. PortalProvider: the container and class name of portals.
2. OverlaysProvider: the stack of open overlays.
3. HotkeysProvider: registered hotkeys and the hotkeys dialog.

Options#

ClawscaleProvider accepts every BlueprintProvider prop and passes it on. The hotkeys props carry a hotkeysProvider prefix.

<ClawscaleProvider
  portalClassName="app-portal"
  hotkeysProviderDialogProps={{ title: "Keyboard shortcuts", globalGroupName: "Workspace" }}
>
  {children}
</ClawscaleProvider>

Use it directly#

Render BlueprintProvider yourself only in an app without ClawscaleProvider, for example one that manages its own theme. Render it once, at the root. Never nest it inside ClawscaleProvider.

root.render(
  <BlueprintProvider>
    <App />
  </BlueprintProvider>,
);

Props interface#