useWidgets

Returns all document widgets in reading order and re-renders the component when they change.

const { widgets, isLoaded } = useWidgets()
  • widgets holds Widget snapshots: plain objects that don't update with the document (read fresh state through the hook's re-renders) and don't change the document when mutated.
  • The list is partial until every page containing widgets has been loaded: isLoaded tells when the list is complete.
  • The array reference changes whenever the list or a widget changes, so useEffect on it handles changes imperatively.

Example

See Working with forms for a form sidebar built on useWidgets together with useWidgetValue.

For a one-time imperative read that waits for all pages instead of re-rendering, see useWidgetsGetter. To follow a single widget by id, see useWidgetById.

On this page