npm install @master/css.react

@master/css.react provides React runtime helpers around @master/css-runtime.

The root entry is intended for projects using an official Master CSS integration:

import { CSSRuntimeRegistry, CSSRuntimeProvider } from '@master/css.react'

Use @master/css.react/runtime-provider when you only need the provider API without the registry's default virtual module dependencies.

Use the registry with an official Master CSS integration:

import { CSSRuntimeRegistry } from '@master/css.react'

export default function Layout({ children }: { children: React.ReactNode }) {
    return (
        <CSSRuntimeRegistry>
            {children}
        </CSSRuntimeRegistry>
    )
}

The registry loads virtual:master-css-manifest and virtual:master-css-emitted-globals internally, so use it when the official integration should load the project-level manifest discovered from the CSS entry and the matching emittedGlobals global CSS state.

Use the provider subpath when you need to pass a custom manifest or root:

import { CSSRuntimeProvider } from '@master/css.react/runtime-provider'
import manifest from './theme.css?master-css-manifest'

export default function Layout({ children }: { children: React.ReactNode }) {
    return (
        <CSSRuntimeProvider manifest={manifest}>
            {children}
        </CSSRuntimeProvider>
    )
}

The provider calls CSSRuntime.create({ manifest, root, emittedGlobals }), loads an external hydration manifest when needed, observes on mount, refreshes the runtime when manifest changes, recreates it when root changes, and destroys it on unmount.

interface CSSRuntimeProviderProps {
    children?: ReactNode
    manifest: MasterCSSManifest
    emittedGlobals?: MasterCSSEmittedGlobals
    hydrationManifest?: MasterCSSHydrationManifest
    root?: Document | ShadowRoot | null
}

Access the runtime instance from components rendered inside CSSRuntimeProvider.

import { useCSSRuntime } from '@master/css.react/runtime-provider'

export function Component() {
    const cssRuntime = useCSSRuntime()
}

See the React installation guide for a full project setup.