useColorField

Field hook to access the data of a configurable field with the type color.

Arguments

The hook can take an object as argument with the following properties.

Field	Type	Description
field	string	The name of the field
defaultColor	string?	The default hex value if the field is empty
defaultAlpha	number?	The default alpha value if the field is empty

Returns

Returns an instance of a Color class.

interface Color {
  isEmpty(): boolean

  getHex(): string | null

  getAlpha(): number

  getHexAlpha(): string

  getHexWithAlpha(): string | null

  toValueColor(): ValueColor | undefined

  toRgb(): { r: number, g: number, b: number, a: number }

  // returns 'rgba(xx, xx, xx, xx)' ready to use for inline styles or styled-components css
  toRgbaCss(): string
}

Example

src/widgets/example/Example.tsx

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

export default function Example() {
  const color: Color = useColorField({field: 'example'})

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