ComponentInput
An entity + component picker. The inspector renders an entity dropdown and, once an entity is selected, a component-kind filter. Use this when you need direct access to a specific component on another entity.
Runtime value: { type: "component"; componentKind?: ComponentKind; value: Component | null } — read field.value

Declaration
Set componentKind to pre-filter the picker to a specific component type. Omit it to allow any component.
import { Behaviour, type ComponentInput } from "@relu-interactives/spatial-ecs";
export default class Demo extends Behaviour {
data = {
cam: { type: "component", componentKind: "CameraComponent", value: null } as ComponentInput,
audio: { type: "component", componentKind: "AudioComponent", value: null } as ComponentInput,
};
}Runtime usage
At runtime, .value is resolved to the live component instance. Cast to the concrete class for full TypeScript autocompletion. Always guard for null:
import {
Behaviour,
CameraComponent,
type ComponentInput,
} from "@relu-interactives/spatial-ecs";
export default class FovReader extends Behaviour {
data = {
camera: { type: "component", componentKind: "CameraComponent", value: null } as ComponentInput,
};
onUpdate() {
const cam = this.data.camera.value as CameraComponent | null;
if (!cam) return; // no component assigned
console.log(cam.fov); // current field of view in degrees
}
}Mutating the component
Mutate the instance directly — the system that owns the component picks up changes next frame:
import {
Behaviour,
CameraComponent,
type ComponentInput,
type FloatInput,
} from "@relu-interactives/spatial-ecs";
export default class FovAnimator extends Behaviour {
data = {
camera: { type: "component", componentKind: "CameraComponent", value: null } as ComponentInput,
targetFov: 90 as FloatInput,
speed: 30 as FloatInput,
};
onUpdate() {
const cam = this.data.camera.value as CameraComponent | null;
if (!cam) return;
// Lerp the field of view toward targetFov
cam.fov += (this.data.targetFov - cam.fov) * this.data.speed * this.deltaTime;
}
}TIP
Always cast to the concrete component type (e.g. as CameraComponent | null) for full autocompletion and always guard the null case — the field is null until the user picks both an entity and a component in the inspector.

