React API Reference
InterpreterEntities
This React component is used to render the entities tree of an interpreter store.
Reference
<InterpreterEntities interpreterStore components children? />
Use the InterpreterEntities
component to render the entities tree.
import {
InterpreterEntities,
useInterpreterStore,
} from "@coltorapps/builder-react";
import { formBuilder } from "./form-builder";
import { TextFieldEntity } from "./text-field-entity";
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);
return (
<InterpreterEntities
interpreterStore={interpreterStore}
components={{ textField: TextFieldEntity }}
/>
);
}
In the example above, we've hardcoded the schema, but typically, you would retrieve it from a database, for instance.
Props
The InterpreterEntities
component accepts three props:
Prop | Type | Description |
---|---|---|
interpreterStore | object | The interpreter store. |
components | object | An object mapping of entities components for each defined entity type in the builder. |
children | function optional | A function intended to wrap each rendered arbitrary entity with additional rendering. It receives both the rendered entity and the entity instance object. |
Returns
The InterpreterEntities
component essentially renders an entities tree.
Render prop
The children
prop of the InterpreterEntities
component must be a function, which is used to wrap each rendered arbitrary entity with additional rendering.
import {
InterpreterEntities,
useInterpreterStore,
} from "@coltorapps/builder-react";
import { formBuilder } from "./form-builder";
import { TextFieldEntity } from "./text-field-entity";
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);
return (
<InterpreterEntities
interpreterStore={interpreterStore}
components={{ textField: TextFieldEntity }}
>
{(props) => (
<div>
{/* This is the rendered entity. */}
{props.children}
</div>
)}
</InterpreterEntities>
);
}
In the example above, we've hardcoded the schema, but typically, you would retrieve it from a database, for instance.