Custom Property

When none of the built-in property types fit your needs, the custom property lets you build your own control. Render anything from a file picker to a color slider to a full form.

Required Parameters

render

A custom property requires a render function. This function receives the current value and an onChange callback to update it.

Inside, you can return any React element and wire up the onChange callback to pass back new values.

Catalog.register('Sample', {
  component: Sample,
  props: {
    image: {
      label: 'Image',
      type: 'custom',
      render: (value, onChange) => (
        <FileUploadInput value={value} onChange={onChange} />
      ),
    },
  },
});