useColorField

Reads the value of a color field.

function useColorField(props: {field: string; defaultColor?: string; defaultAlpha?: number}): Color

Arguments

Property	Type	Description
field	string	The name of the field.
defaultColor	string	The hex color (e.g. #ffffff) used while the field is empty.
defaultAlpha	number	The opacity between 0 and 1 used while the field has no opacity. Defaults to 1.

Returns

An instance of the Color class, which is exported by @modbros/dashboard-sdk:

Method	Returns	Description
isEmpty()	boolean	Whether the user didn't select a color. Ignores the defaultColor.
getHex()	string | null	The hex color, e.g. #ff0000, falling back to the defaultColor.
getAlpha()	number	The opacity between 0 and 1, falling back to the defaultAlpha.
getHexAlpha()	string	The opacity as hex value.
getHexWithAlpha()	string | null	The hex color including the opacity.
toRgb()	Rgba | null	The color as {r, g, b, a} object. Rgba is exported by @modbros/dashboard-sdk.
toRgbaCss()	string	The color as CSS value, e.g. rgba(255, 0, 0, 1). An empty string if there is no color.
toValueColor()	ValueColor | undefined	The raw value of the field.

Example

src/widgets/example/Example.tsx

import React from 'react'
import {Color, useColorField} from '@modbros/dashboard-sdk'

export default function Example() {
  const color: Color = useColorField({field: 'color', defaultColor: '#ffffff'})

  return <span style={{color: color.toRgbaCss()}}>I'm colored</span>
}