https://github.com/shwilliam/react-use-css-var

👩‍🎨 A tiny hook to interface with CSS custom properties
https://github.com/shwilliam/react-use-css-var

css-custom-properties hooks react typescript

Last synced: 13 days ago
JSON representation

👩‍🎨 A tiny hook to interface with CSS custom properties

• Host: GitHub
• URL: https://github.com/shwilliam/react-use-css-var
• Owner: shwilliam
• License: mit
• Created: 2020-05-10T23:44:15.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-03-26T16:42:09.000Z (almost 3 years ago)
• Last Synced: 2024-12-08T16:52:24.000Z (25 days ago)
• Topics: css-custom-properties, hooks, react, typescript
• Language: TypeScript
• Homepage: https://react-use-css-var.netlify.app
• Size: 432 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React useCssVar (--\*)

> A tiny hook to interface with CSS custom properties

## Installation

```shell

npm i @shwilliam/react-css-var

```

## Usage

```jsx

import React, {useState} from 'react'

import {useCssVar} from '@shwilliam/react-use-css-var'

const App = () => {

  const [get, set] = useCssVar('--color-bg')

  return (

    

      
Current bg: {get()}


       set('blue')}>Blue

       set('red')}>Red

    

  )

}

```

## 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](https://github.com/shwilliam/react-use-css-var/issues).

If you wish to work on this project:

1. Fork [this project](https://github.com/shwilliam/react-use-css-var)

2. Create a branch (`git checkout -b new-branch`)

3. Commit your changes (`git commit -am 'add new feature'`)

4. Push to the branch (`git push origin new-branch`)

5. [Submit a pull request!](https://github.com/shwilliam/react-use-css-var/pull/new/master)