@klorad/react

React bindings. Components declare what exists; hooks read and subscribe. No world logic.

"use client";
import { KloradProvider, SceneObject, Connector, useLatest } from "@klorad/react";

The package is a client module (it ships with "use client"). Hooks use useSyncExternalStore over the scene, so they re-render only when what they read changes.

Components

Export	Description
`KloradProvider`	Creates a scene from `options` (the same as `createScene`), or provides the `scene` you pass.
`SceneObject`	Declares an object: added on mount, updated when its props change, removed on unmount. Takes the props of a `SceneObjectSpec` and needs an `id`. Changing its id, correspondence or binding replaces the object instead of updating it.
`Connector`	Connects a source to the scene while mounted. `useConnector(source)` is the hook form.
`InteractionProvider`	Provides an `Interaction` to the hooks below.

Hooks

Hook	Returns
`useScene()`	The scene from the nearest provider.
`useSceneObjects()`	Every object.
`useSceneObject(id)`	One object, or `undefined`.
`useReadings(id)`	The current reading of every quantity of an object.
`useLatest(id, quantity)`	The current reading of one quantity.
`useShadow(id)`	`{ object, readings, isStale(quantity) }`.
`useSceneVersion()`	The scene's event sequence number.
`useInteraction()`	The `Interaction` from `InteractionProvider`.
`useActions(objectId, actor, world?)`	The Actions this actor may take on the object now.
`useAction()`	`[perform, { pending, result }]`.

Rendering

The 3D view is ThreeView from @klorad/engine-three/react, which reads the scene from KloradProvider.

Components

Hooks

Rendering

On this page