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

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