Create useCssVariable hook

[leroykorterink]

import { RefObject, useEffect } from 'react';

type RefObjectOption<T> = RefObject<T> | T;

/**
 * This function allows you to get the current value of a ref object, or the
 * value as is.
 */
function getRefObjectOptionValue<T>(target: RefObjectOption<T>): T | null {
  return target !== null && typeof target === 'object' && 'current' in target
    ? target.current
    : target;
}

/**
 * This hook allows you to set a CSS variable to a given value on either the
 * first element in the document, or a target element.
 *
 * The name parameter is the name of the CSS variable, and the value parameter
 * is the value to which the variable should be set.
 *
 * The target parameter is an optional element, and if it is present, the CSS
 * variable will be set on that element instead of the first element in the
 * document.
 */
export function useCssVariable(
  name: `--${string}`,
  value: string
): void {
  useEffect(() => {
    const element = document.firstElementChild as HTMLElement | null;

    element?.style.setProperty(name, value);
  }, [name, target, value]);
}

[leroykorterink]

The RefObjectOption type and getRefObjectOptionValue function should be moved to a separate file. I think we should also export the type/function in the package.

[ThaNarie]

set a CSS variable

Seems this hook can be used to set ANY css property/value pair, including normal styles?

If we want to keep it for variables, should we validate them?

A custom property is any property whose name starts with two dashes (U+002D HYPHEN-MINUS), like --foo.

https://www.w3.org/TR/css-variables-1/#defining-variables

[leroykorterink]

I think we should, but instead of validating it in JS we should create a TS template string.

Also, now that I'm looking at this again, we should not allow custom targets because the style property should be used if a variable should be set on an element.

<div style={{ '--var': 'red' }} />

[ThaNarie]

I think we should, but instead of validating it in JS we should create a TS template string.

We should do both :)