useVisualEdit

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

Hook to create your own visual editing component. It takes a propName as argument and returns a [value, setValue, isReadOnly] array.

• value is a value of a prop
• setValue function accepts a value as argument.
• isReadOnly is true in the frontend and in Admin > Preview mode

Example usage#

const [value, setValue, isReadOnly] = useVisualEdit('code')
if (isReadOnly) {
  return (
    <div>{value}</div>
  )
}
return (
  <MyEditor value={value} onChange={setValue}>
)