useFontField

Reads the value of a font field, and makes sure the dashboard loads the selected font. MoBro serves the font, so it doesn't have to be installed on the device displaying the dashboard.

function useFontField(props: {field: string; defaultValue?: string}): string | null

Arguments

Property	Type	Description
field	string	The name of the field.
defaultValue	string	The font returned while no font is selected.

Returns

The name of the selected font, to be used as font-family. If no font is selected, the defaultValue, or null without a defaultValue.

Example

src/widgets/example/Example.tsx

import React from 'react'
import {useFontField} from '@modbros/dashboard-sdk'

export default function Example() {
  const font = useFontField({field: 'font'})

  return <span style={{fontFamily: font ?? undefined}}>Text in the selected font</span>
}