use-css-variable

use-css-variable.ts

'use client';

import React, { useId } from 'react';

export function useCssVariable<GValue extends string | number>(
	elementRef: React.RefObject<HTMLElement | null>,
	config: TCssVariableConfig<GValue> | (() => TCssVariableConfig<GValue>),
	deps: React.DependencyList = []
) {
	const id = useId();
	const { variable, variableName, initialValue, unit } = React.useMemo(() => {
		const resolvedConfig = typeof config === 'function' ? config() : config;
		const { name, initialValue, unit = '' } = resolvedConfig;
		const variableName = `--${name}-${id}`;
		const variable = `var(${variableName}, ${initialValue}${unit})`;

		return { variable, variableName, initialValue, unit };
	}, [config, id, ...deps]);

	const updateValue = React.useCallback(
		(value: GValue) => {
			elementRef.current?.style.setProperty(variableName, `${value}${unit}`);
		},
		[elementRef, variableName, unit]
	);

	React.useEffect(() => {
		updateValue(initialValue);
	}, [updateValue, initialValue, ...deps]);

	return [variable, updateValue] as const;
}

interface TCssVariableConfig<GValue extends string | number> {
	name: string;
	initialValue: GValue;
	unit?: string;
}

My use case

Screen.Recording.2025-03-27.at.16.18.05.mov