useCssVar

Hook that returns the value of a css variable

utilities

test coverage

Last changed: 2 hours ago

Installation

Library

CLI

Manual

import { useCssVar } from '@siberiacancode/reactuse';

Usage

const { ref, value, set, remove } = useCssVar('--color', 'red');
// or
const { value, set, remove } = useCssVar(ref, '--color', 'red');

Demo

source

Api

Parameters

Name	Type	Default	Note
key	string	-	The CSS variable key
initialValue	string	-	The initial value of the CSS variable

Returns

UseCssVarReturn & { ref: StateRef<Element> }

Parameters

Name	Type	Default	Note
target	HookTarget	-	The target element
key	string	-	The CSS variable key
initialValue	string	-	The initial value of the CSS variable

Returns

UseCssVarReturn

Type declaration

import type { HookTarget } from '@/utils/helpers';

import type { StateRef } from '../useRefState/useRefState';

export interface UseCssVarReturn {
  /** The value of the CSS variable */
  value: string;
  /** Remove the value of the CSS variable */
  remove: () => void;
  /** Set the value of the CSS variable */
  set: (value: string) => void;
}

export interface UseCssVar {
  <Target extends HTMLElement>(
    key: string,
    initialValue?: string
  ): UseCssVarReturn & {
    ref: StateRef<Target>;
  };

  (target: HookTarget, key: string, initialValue?: string): UseCssVarReturn;
}

Source

Source • Demo

Contributors

D

debabin