@shwilliam/react-css-var
v0.1.0
Published
Custom hook to interface with CSS custom properties
Downloads
4
Maintainers
Readme
React useCSSVar (--*)
A tiny hook to interface with CSS custom properties
Installation
npm i @shwilliam/react-use-css-var
Usage
import React, {useState} from 'react'
import {useCssVar} from './react-use-css-var'
const App = () => {
const [get, set] = useCssVar('--color-bg')
return (
<main style={{backgroundColor: '--color-bg'}}>
<p>Current bg: {get()}</p>
<button onClick={() => set('blue')}>Blue</button>
<button onClick={() => set('red')}>Red</button>
</main>
)
}
Development
To start local development, simply install npm dependencies (npm i
) and run
npm run dev
to watch ts files in src/
. Built files can be found in dist/
.
Demo
To run the demo, ensure you have run the build script and have a dist
dir in
your project root. Then run npm run demo:setup
to copy these to the demo.
Navigate to the demo and install its dependencies (cd demo && npm i
). You can
now start the demo app locally by running npm start
.
Contributing
This project is open to and encourages contributions! Feel free to discuss any bug fixes/features in the issues. If you wish to work on this project:
- Fork this project
- Create a branch (
git checkout -b new-branch
) - Commit your changes (
git commit -am 'add new feature'
) - Push to the branch (
git push origin new-branch
) - Submit a pull request!