Blueprint Provider - Blueprint

@# BlueprintProvider

BlueprintProvider is a compound React context provider which enables & manages various global behaviors of Blueprint applications. It must be rendered at the root of your application and may only be used once as a singleton provider.

Concretely, this provider renders the following provider components in the correct nesting order and allows customization of their options via props:

OverlaysProvider
HotkeysProvider
PortalProvider

Usage

To use BlueprintProvider, wrap your application with it at the root level:

tsx

import { BlueprintProvider } from "@blueprintjs/core";
import * as React from "react";
import * as ReactDOM from "react-dom/client";

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
    <BlueprintProvider>
        <div>My app has overlays, hotkeys, and portal customization 😎</div>
    </BlueprintProvider>,
);

Usage with other providers

If your app uses a router or other providers (e.g. RouterProvider, ApolloProvider), nest BlueprintProvider underneath them:

tsx

import { BlueprintProvider } from "@blueprintjs/core";
import { createBrowserRouter, RouterProvider } from "react-router-dom";

const router = createBrowserRouter([...]);

function App() {
    return (
        <RouterProvider router={router}>
            <BlueprintProvider>
                <div>My app has overlays, hotkeys, and portal customization 😎</div>
            </BlueprintProvider>
        </RouterProvider>
    );
}

Props interface

@interface BlueprintProviderProps