useCssVar

Category

Browser

Export Size

629 B

Last Changed

5 days ago

Manipulate CSS variables

Demo

Usage

import { useCssVar } from '@reause/core'
import { useRef } from 'react'

const el = useRef<HTMLDivElement>(null)
const [color1, setColor1] = useCssVar('--color', el)
// force a re-render (e.g. with your own state) once `el` is populated

const [key] = useState('--color')
const [colorVal, setColorVal] = useCssVar(key, el)

const [color2, setColor2] = useCssVar('--color', el, { initialValue: '#eee' })
setColor2(null) // removes the --color property from the element

Type Declarations

export interface UseCssVarOptions extends ConfigurableWindow {
    initialValue?: string;
    observe?: boolean;
}

export type UseCssVarElement = HTMLElement | SVGElement | null | undefined

export type UseCssVarReturn = [
    value: string | null | undefined,
    setValue: Dispatch<SetStateAction<string | null | undefined>>
]

export function useCssVar(prop: string | null | undefined, target?: RefObject<UseCssVarElement | null>, options?: UseCssVarOptions): UseCssVarReturn

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.0 on

374a4 - fix(core): resolve useCssVar audit findings (#536)

8fddc - chore!: remove all Vue-only Maybe* types and getter unions, adopt React Ref (#462)