Skip to content

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

ComponentInput inspector control

Declaration

Set componentKind to pre-filter the picker to a specific component type. Omit it to allow any component.

ts
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:

ts
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:

ts
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.