useCSSVariable

A hook to create a CSS variable and its reference.
It is very similar to createVariableReference but uses React's useId (new tab) under the hood to generate a unique variable name.

import { useCSSVariable } from '@weser/style'

function MyComponent() {
  const [variable, reference] = useCSSVariable('red')

  return (
    <>
      <div style={{ [variable]: 'blue', color: reference }}>I'm blue</div>
      <div style={{ color: reference }}>I'm red</div>
    </>
  )
}

([string, string]) A tuple where the first element is a string referencing the name of the CSS variable and the second element is a string referencing a CSS value referencing the CSS variable.