Guide
Reference
Roadmap
Guide
Reference
Roadmap

useCssVar

Tags:
Browser

A React Hook that allows you to use CSS variables in your components.

Demo

Try to toggle dark mode or click button below to see the effect.

Source
`--ifm-background-color` in this doc:
`--color` of `<html>`:
skyblue
Elit irure amet velit laboris cupidatat id consequat?

Usage

See API for more details.

Source

Click links below to view source on GitHub.

🪝 Hook🎨 Demo📄 Document

API

const [variable, setVariable] = useCssVar(variableName, options, target)

VariableName

string, The name of the CSS variable you want to use.

Options

export type UseCssVarOptions = { /** * default value of the CSS variable * * @defaultValue '' */ defaultValue?: string /** * whether to observe the changes of the CSS variable * * @defaultValue false */ observe?: boolean }

ElementTarget

ElementTarget is a union type that represents various kinds of elements that can be targeted.

See ElementTarget or ElementTarget Types for more details.

() => document.documentElement by defaults.

Returns

Same as React.useState, a tuple with the current value of the CSS variable and a function to update it.

export type UseCssVarReturns = readonly [string, ReactSetState<string>]