> ## Documentation Index
> Fetch the complete documentation index at: https://dadd.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# MujocoProvider

> WASM module lifecycle provider

The outermost wrapper that loads the MuJoCo WASM module and provides it to all children.

## Usage

```tsx theme={null}
import { MujocoProvider } from "mujoco-react";

function App() {
  return (
    <MujocoProvider>
      <MujocoCanvas config={config}>
        {/* ... */}
      </MujocoCanvas>
    </MujocoProvider>
  );
}
```

## Props

<ParamField body="children" type="React.ReactNode" required>
  Child components that need access to MuJoCo.
</ParamField>

<ParamField body="onError" type="(error: Error) => void">
  Called if the WASM module fails to load.
</ParamField>

<ParamField body="wasmUrl" type="string">
  Custom URL for the single-threaded `.wasm` asset.
</ParamField>

<ParamField body="mtWasmUrl" type="string">
  Custom URL for the multi-threaded `.wasm` asset.
</ParamField>

<ParamField body="threadedLoader" type="(options?) => Promise<unknown>">
  Optional loader imported from `@mujoco/mujoco/mt`. It is supplied by apps that opt into threaded WASM.
</ParamField>

<ParamField body="wasmVariant" type="&#x22;single&#x22; | &#x22;threaded&#x22; | &#x22;auto&#x22;">
  MuJoCo WASM build to load. Defaults to `"single"`. `"auto"` selects the threaded build only when `threadedLoader` and `mtWasmUrl` are provided and the page is cross-origin isolated.
</ParamField>

<ParamField body="timeout" type="number">
  WASM initialization timeout in milliseconds.
</ParamField>

## Threaded WASM

The official `@mujoco/mujoco` package includes a multi-threaded WASM build in addition to the default single-threaded build. Import it only in apps that opt into it:

```tsx theme={null}
import loadMujocoMt from "@mujoco/mujoco/mt";
import mtWasmUrl from "@mujoco/mujoco/mt/mujoco.wasm?url";

<MujocoProvider
  wasmVariant="auto"
  threadedLoader={loadMujocoMt}
  mtWasmUrl={mtWasmUrl}
>
  <MujocoCanvas config={config} />
</MujocoProvider>
```

Forced threaded mode requires browser cross-origin isolation headers:

```txt theme={null}
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
```

## useMujocoWasm Hook

Access the WASM module status from any child component:

```tsx theme={null}
import { useMujocoWasm } from "mujoco-react";

function LoadingIndicator() {
  const { mujoco, status, error } = useMujocoWasm();

  if (status === "loading") return <div>Loading WASM...</div>;
  if (status === "error") return <div>Error: {error}</div>;
  // mujoco is now available
  return null;
}
```

### Return Value

| Field    | Type                              | Description                                  |
| -------- | --------------------------------- | -------------------------------------------- |
| `mujoco` | `MujocoModule \| null`            | The raw WASM module, or `null` while loading |
| `status` | `'loading' \| 'ready' \| 'error'` | Current lifecycle state                      |
| `error`  | `string \| null`                  | Error message if loading failed              |

## Notes

* Must wrap any component that uses `MujocoCanvas` or mujoco-react hooks
* The WASM module is loaded once on mount from `@mujoco/mujoco`. The package ships the JavaScript bindings and `.wasm` asset.
* Loading typically takes 1-3 seconds on first visit; subsequent visits use the browser cache