https://github.com/michal-wrzosek/use-css-var
useCssVar React hook - allows you to use CSS variables for your components props
https://github.com/michal-wrzosek/use-css-var
Last synced: 9 months ago
JSON representation
useCssVar React hook - allows you to use CSS variables for your components props
- Host: GitHub
- URL: https://github.com/michal-wrzosek/use-css-var
- Owner: michal-wrzosek
- License: mit
- Created: 2020-11-13T08:00:29.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T16:16:40.000Z (almost 3 years ago)
- Last Synced: 2025-02-21T22:23:06.027Z (10 months ago)
- Language: JavaScript
- Size: 1.4 MB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# use-css-var
React hook that will allow you to control randomly generated CSS variable.
## Install
package is already shipped with types for TypeScript
```bash
yarn add use-css-var
```
or
```bash
npm i --save use-css-var
```
## Usage
Simple example with styled components:
```typescript
import React, { useState, useCallback } from 'react';
import styled from 'styled-components';
import { useCssVar } from 'use-css-var';
const Box = styled.div<{ colorVar: string }>`
width: 20px;
height: 20px;
background-color: var(--${({ colorVar }) => colorVar});
`;
const Example = () => {
const [isRed, setIsRed] = useState(true);
const colorVar = useCssVar(isRed ? 'red' : 'blue');
const handleClick = useCallback(() => setIsRed(prev => !prev), []);
return ;
}
```
## Example + Demo
Check out another example with lots of state changes in example app:
https://github.com/michal-wrzosek/use-css-var/blob/master/example/src/App.tsx
Live demo:
https://michal-wrzosek.github.io/use-css-var/
## Notes
This package is still in an experimental phase and contribution is very welcomed.
---
This package was bootstrapped with [react-component-lib](https://github.com/michal-wrzosek/react-component-lib)