Docs
API Reference
Custom

Custom

Implement a field with a custom UI. Extends Base.

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

ParamExampleTypeStatus
typetype: "custom""custom"Required
render()render: () => <input />FunctionRequired

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

ParamExampleType
field{ type: "custom" }Object
ididString
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.

ParamExampleTypeStatus
value"Hello, world"AnyRequired
ui{leftSideBarVisible: false}UiState

Further reading