createEntityComponent

This function defines an entity component for later use within the <BuilderEntities /> and <InterpreterEntities /> components.

The function itself serves primarily as a type safety helper and doesn't perform any underlying logic.

Reference

createEntityComponent(entity, render)

Use the createEntityComponent function to define the component for your entity:

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

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

export const TextFieldEntity = createEntityComponent(
  textFieldEntity,
  (props) => {
    return (
      <div>
        <label htmlFor={props.entity.id}>{props.entity.attributes.label}</label>
        <input
          id={props.entity.id}
          name={props.entity.id}
          value={props.entity.value ?? ""}
          onChange={(e) => props.setValue(e.target.value)}
          placeholder={props.entity.attributes.placeholder}
          required={props.entity.attributes.required}
        />
        {/* Normally, you'll handle your own error types. */}
        {typeof props.entity.error === "string" ? props.entity.error : null}
      </div>
    );
  },
);

Parameters

createEntityComponent accepts two parameters:

Returns

The createEntityComponent function essentially creates a React component to be used within the <BuilderEntities /> and <InterpreterEntities /> components.