createAttributeComponent

This function defines an attribute component for later use within the <BuilderEntityAttributes /> component.

The function is not just a type safety helper compared to createEntityComponent, because it consumes data from an internal context behind the scenes.

Reference

createAttributeComponent(attribute, render)

Use the createAttributeComponent function to define the editor component for your attribute:

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

import { labelAttribute } from "./label-attribute";

export const LabelAttribute = createAttributeComponent(
  labelAttribute,
  (props) => {
    const id = `${props.entity.id}-${props.attribute.name}`;

    return (
      <div>
        <label htmlFor={id}>Field Label</label>
        <input
          id={id}
          name={id}
          value={props.attribute.value ?? ""}
          onChange={(e) => props.setValue(e.target.value)}
          required
        />
        {/* Normally, you'll handle your own error types. */}
        {typeof props.attribute.error === "string"
          ? props.attribute.error
          : null}
      </div>
    );
  },
);

Parameters

createAttributeComponent accepts two parameters:

Returns

The createAttributeComponent function essentially creates a React component to be used within the <BuilderEntityAttributes /> component.