Field Hooks

Field hooks read the values users configured for the fields of a widget. Every hook takes the name of the field as field argument, and re-renders the widget when the value changes.

Within a Repeater, field hooks read the fields of the current repeater item.

Field type	Hook
string	useStringField
number	useNumberField
checkbox	useCheckboxField
select, radio	useSelectField
file	useFileField, useFilesField
font	useFontField
metric	useMetricField, useMemoizedMetricField, useIsMetricFieldConfigured
color	useColorField
repeater	useRepeaterField
action	useActionField
any	useRawField, useFieldConfig

Setter Hooks

Setter hooks update the value of a field from within the widget, just as if the user changed it in the dashboard builder. The following setter hooks exist:

Hook	Value type
useSetStringField	string
useSetNumberField	number
useSetCheckboxField	boolean
useSetSelectField	string
useSetColorField	ValueColor
useSetRawField	any

There are no dedicated setter hooks for the other field types; use useSetRawField for them.

Setter hooks take the field as argument and return a setter function, a SetterOrUpdater of Recoil. Like the setter of useState, it takes either the new value or a function receiving the previous value:

src/widgets/example/Example.tsx

import React from 'react'
import {useSetStringField, useStringField} from '@modbros/dashboard-sdk'

export default function Example() {
  const text = useStringField({field: 'example'})
  const setText = useSetStringField({field: 'example'})

  return <button onClick={() => setText((previous) => `${previous ?? ''}!`)}>{text}</button>
}