Custom Property

When none of the built-in property types quite fit your needs, the custom property gives you the power to build your own control. This gives you total flexibility — render anything from a file picker to a color slider to a full-blown form.

Required Parameters

render

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

Inside, you can return any React element — a button, a slider, or even a small form — and just wire up the onChange callback to pass back new values.

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