[Feat?]: create useCanvasColors hook

[caseybaggz]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

When working with canvas related libraries, in order to use Cerb colors you have to hack around the document body. We should provide a hook that makes this easier for the user.

Create a new hook called useChartColors with the use client directive at the top of

• the file
• Create an useReducer<{ tokenName: string }> to hold the value
• Add a useEffect to put your document canvas code in which will update the state
• return a useMemo of the state - unless you are doing useReducer, then you don't need that
• Use the hook to get the values for the chart customization in the client component

Examples 🌈

Goal to have an API like this

'use client'

const colorsToGet = [
  'dataViz.diverging.50',
  'dataViz.diverging.100',
  'dataViz.diverging.200'
]

function SomeFeatureWithACanvasItem() {
  const [cavasSettings, setCanvasSettings] = useState(initialSettings)
  const colors = useCanvasColors(colorsToGet)

  useEffect(() => {
     setCanvasSettings((prev) => ({
         ...prev,
         someSetting: {
             bgColor: colors[colorsToGet[0]]
         },
         anotherSetting: {
             bgColor: colors[colorsToGet[1]]
         },        
     }))
  }, [colors])

  return (
     <SomeCanvasThing settings={canvasSettings} />
  )
}

Motivation 🔦

No response