use-css-var
React hook that will allow you to control randomly generated CSS variable.
Install
package is already shipped with types for TypeScript
yarn add use-css-var
or
npm i --save use-css-var
Usage
Simple example with styled components:
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 <Box colorVar={colorVar} onClick={handleClick} />;
}
Example + Demo
Check out another example with lots of state changes in example app: https://github.com/michal-wrzosek/react-component-lib/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