useVisualEdit

Custom Visual editing components

Sometimes you may want to add new visual editing components beyond the predefined Text, RichText, Image, or File.

For instance, you might want to create a code editor (like the one found in React Bricks UI blocks) or a canvas where editors can draw.

The useVisualEdit hook allows you to create a custom visual editing component that reads from a block property and saves back to that property.

Usage Example

const [value, setValue, isReadOnly] = useVisualEdit('my-prop')

if (isReadOnly) {
  // Here we are on the frontend
  return (
    <div>{value}</div>
  )
}

// Here we are in the content administration interface
return (
  <MyEditorComponent value={value} onChange={setValue}>
)

Hook Definition

const useVisualEdit = (
  propName: string
): [any, (value: any) => void, boolean]

The useVisualEdit hook takes a propName as argument and returns a [value, setValue, isReadOnly] array.

You can use value, setValue, and isReadOnly to create your editing component:

• value is the value of the prop
• setValue function that accepts a value as argument and sets the prop accordingly
• isReadOnly is true in the frontend and Preview mode, while false in the Admin Editor