1.0.2 • Published 2 years ago
use-color-change v1.0.2
use-color-change
React hook for flashing a numeric value when it changes
Installation
This module can be used in any React project that supports hooks.
npm i use-color-change
Usage
Use the hook and pass a number as the first parameter. Specify the colors you want to flash and how long the animation should take.
The return value of the hook has the type {animation: string}
, you can pass it as a style for any element and also further customize it for example using animation-timing-function
if you please.
export const App = () => {
const [value, setValue] = useState(0);
const colorStyle = useColorChange(value, {
higher: 'limegreen',
lower: 'crimson',
duration: 1800
});
return <div style={colorStyle}>{value}</div>;
};
Function signature
useColorChange(value: number, {
higher: string | null;
lower: string | null;
duration?: number | undefined;
})
value
: The numeric value for which the animation should be based on.options
:higher
: The color which should be flashing when the value increases. You can passnull
for no animation.lower
: The color which should be flashing when the value decreases. You can passnull
for no animation.duration
: (optional) How long the flash should take in miliseconds. Default is1800
.property
: (optional) eithercolor
orbackground-color
, allowing you to animate the background color instead.
Author
© Jonny Burger
License
MIT
1.0.2
2 years ago
1.0.1
3 years ago
1.0.0
4 years ago
1.0.0-beta.5
4 years ago
1.0.0-beta.4
4 years ago
1.0.0-beta.3
4 years ago
1.0.0-beta.2
4 years ago
1.0.0-beta.1
4 years ago
1.0.1-alpha.2
4 years ago
1.0.0-alpha.2
4 years ago
1.0.0-alpha.1
4 years ago
1.0.0-alpha.0
4 years ago