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 |
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 |