React Form Builder | useInterpreterStore

This React hook creates an interpreter store.

Reference

`useInterpreterStore(builder, schema, options?)`

Use the useInterpreterStore function to create an interpreter store.

import { useInterpreterStore } from "@coltorapps/builder-react";

import { formBuilder } from "./form-builder";

const formSchema = {
  entities: {
    "51324b32-adc3-4d17-a90e-66b5453935bd": {
      type: "textField",
      attributes: {
        label: "First name",
      },
    },
  },
  root: ["51324b32-adc3-4d17-a90e-66b5453935bd"],
};

export function App() {
  const interpreterStore = useInterpreterStore(formBuilder, formSchema);
}

In the example above, we've hardcoded the schema, but typically, you would retrieve it from a database, for instance.

Parameters

useInterpreterStore accepts three parameters:

Parameter	Type	Description
`builder`	object	The builder definition.
`schema`	object	The schema that was built using the provided builder definition.
`options`	object optional	An optional partial object with initialization options.

The options parameter properties:

Property	Type	Description
`initialData`	object optional	The optional partial initial data of the interpreter store.
`initialEntitiesValuesWithDefaults`	boolean optional	A flag to enable or disable the automatic setting of default values. Defaults to `true`.
`events`	object optional	An optional partial object with events callbacks.

Returns

The useInterpreterStore function essentially creates and returns an interpreter store.

Events Callbacks

Each event emitted by the builder store is available as a callback within the events key of the options parameter. Every callback receives a specific payload based on the event.

Callback	Description
`onEntityValueUpdated`	An entity's value was updated.
`onEntityErrorUpdated`	An entity's validation error was updated.
`onEntityUnprocessable`	An entity was marked as unprocessable.
`onEntityProcessable`	An entity was marked as processable.
`onDataSet`	The data was manually set.