API ReferenceFieldsCustom

Custom

Implement a field with a custom UI. Extends Base.

Interactive Demo

Example

Hello, world


import { FieldLabel } from "@measured/puck";
 
const config = {
  components: {
    Example: {
      fields: {
        title: {
          type: "custom",
          render: ({ name, onChange, value }) => (
            <input
              defaultValue={value}
              name={name}
              onChange={(e) => onChange(e.currentTarget.value)}
            />
          ),
        },
      },
      render: ({ title }) => {
        return <p>{title}</p>;
      },
    },
  },
};

Params

Param	Example	Type	Status
`type`	`type: "custom"`	”custom”	Required
`render()`	`render: () => <input />`	Function	Required
`contentEditable`	`contentEditable: true`	Boolean	-

Required params

`type`

The type of the field. Must be "custom" for Custom fields.


const config = {
  components: {
    Example: {
      fields: {
        title: {
          type: "custom",
          render: ({ name, onChange, value }) => (
            <input
              defaultValue={value}
              name={name}
              onChange={(e) => onChange(e.currentTarget.value)}
            />
          ),
        },
      },
      // ...
    },
  },
};

`render(params)`

Render the custom field.


import { FieldLabel } from "@measured/puck";
 
const config = {
  components: {
    Example: {
      fields: {
        title: {
          type: "custom",
          render: ({ name, onChange, value }) => (
            <input
              defaultValue={value}
              name={name}
              onChange={(e) => onChange(e.currentTarget.value)}
            />
          ),
        },
      },
      // ...
    },
  },
};

`params`

Param	Example	Type
`field`	`{ type: "custom" }`	Object
`id`	`id`	String
`name`	`"title"`	String
`onChange(value, ui)`	`onChange("Hello, world")`	Function
`value`	`"Hello, world"`	Any

onChange(value, [ui])

Set the value of the field and optionally update the Puck UI state.

Param	Example	Type	Status
`value`	`"Hello, world"`	Any	Required
`ui`	`{leftSideBarVisible: false}`	UiState

Optional params

contentEditable

Enable inline text editing for this field. Only works if the value is a string. Defaults to false.

⚠️

When setting contentEditable, your String prop will be converted to an Object when rendered inside <Puck> (but not <Render>). When using TypeScript, change your string to string | ReactNode.


const config = {
  components: {
    Example: {
      fields: {
        title: {
          type: "custom",
          contentEditable: true,
          render: ({ name, onChange, value }) => (
            <input
              value={value} // Bind to value for 2-way binding
              name={name}
              onChange={(e) => onChange(e.currentTarget.value)}
            />
          ),
        },
      },
      // ...
    },
  },
};