useEntityValue

The useEntityValue hook subscribes to the value of a specific interpreter entity instance and returns the selected result. It provides fine-grained control over reactivity and re-renders by allowing a selector and comparator to be passed.

Reference

useEntityValue(entity, selector?, comparator?)

Use the useEntityValue function to access and subscribe to the current value of a specific entity instance.

import {
  useEntityValue,
  type InterpreterEntityComponentProps,
  type InterpreterEntityInstance,
} from "@coltorapps/builder-react";

import { textFieldEntity } from "./text-field-entity";

function TextFieldInput(props: {
  entity: InterpreterEntityInstance<typeof textFieldEntity>;
}) {
  const value = useEntityValue(props.entity);

  return (
    <input
      value={value ?? ""}
      onChange={(e) => props.entity.setValue(e.target.value)}
    />
  );
}

export function InterpreterTextFieldEntity(
  props: InterpreterEntityComponentProps<typeof textFieldEntity>,
) {
  return <TextFieldInput entity={props.entity} />;
}

Parameters

useEntityValue accepts three parameters:

Returns

The useEntityValue hook returns the selected value of the given entity. If a selector is provided, it returns the derived value instead.