BuilderEntities

This React component is used to render the entities tree of a builder store.

Reference

<BuilderEntities builderStore components children? />

Use the BuilderEntities component to render the entities tree.

import { BuilderEntities, useBuilderStore } from "@coltorapps/builder-react";

import { formBuilder } from "./form-builder";
import { TextFieldEntity } from "./text-field-entity";

export function App() {
  const builderStore = useBuilderStore(formBuilder);

  return (
    <BuilderEntities
      builderStore={builderStore}
      components={{ textField: TextFieldEntity }}
    />
  );
}

Props

The BuilderEntities component accepts three props:

Returns

The BuilderEntities component essentially renders an entities tree.

Render prop

The children prop of the BuilderEntities component must be a function, which is used to wrap each rendered arbitrary entity with additional rendering. This can be useful, for instance, to render a delete button alongside each entity.

import { BuilderEntities, useBuilderStore } from "@coltorapps/builder-react";

import { formBuilder } from "./form-builder";
import { TextFieldEntity } from "./text-field-entity";

export function App() {
  const builderStore = useBuilderStore(formBuilder);

  return (
    <BuilderEntities
      builderStore={builderStore}
      components={{ textField: TextFieldEntity }}
    >
      {(props) => (
        <div>
          {/* This is the rendered entity. */}
          {props.children}
          <button
            onClick={() => {
              builderStore.deleteEntity(props.entity.id);
            }}
          >
            Delete
          </button>
        </div>
      )}
    </BuilderEntities>
  );
}