useWidgetValue

Binds one widget's form value to the component, like a useState backed by the document.

const [value, setValue] = useWidgetValue(widget)

widget is a Widget snapshot, such as an entry of useWidgets. The value is shaped like the value of the matching HTML form control:

Behavior

• The value follows the document: form filling in the main view, changes by other collaborators, and undo/redo are reflected as they happen, and so are changes to the widget props that shape the value, such as fieldName, checkedValue, or options.
• The value is always read from the live document, so a stale widget snapshot is safe to pass in.
• When there is nothing to read (no stored value, the widget was deleted, or no document is loaded), the value is the empty value of the widget's kind: '', false, or [].
• setValue throws InvalidInputError when the widget no longer exists or the value doesn't match the widget's kind; with no document loaded, it throws DocumentNotLoadedError.

Example

import { TextWidget, useWidgetValue } from '@sdk-pdf/react'

function TextField({ widget }: { widget: TextWidget }) {
  const [value, setValue] = useWidgetValue(widget)

  return (
    <label>
      {widget.fieldName}
      <input value={value} onChange={(event) => setValue(event.currentTarget.value)} />
    </label>
  )
}

See Working with forms for a complete form sidebar.