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

​
Usage

import { MujocoProvider } from "mujoco-react";

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

​
Props

​
children
React.ReactNode
required
Child components that need access to MuJoCo.
​
onError
(error: Error) => void
Called if the WASM module fails to load.

​
useMujocoWasm Hook

Access the WASM module status from any child component: 
import { useMujocoWasm } from "mujoco-react";

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

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

​
Return Value

FieldTypeDescription
mujocoMujocoModule | nullThe raw WASM module, or null while pending
status'pending' | 'error'Current lifecycle state (absent once loaded)
errorstring | nullError message if loading failed

​
Notes

  • Must wrap any component that uses MujocoCanvas or mujoco-react hooks
  • The WASM module is loaded once on mount. The embedded binary in mujoco-js is ~2MB.
  • Loading typically takes 1-3 seconds on first visit; subsequent visits use the browser cache