use-color-change
v1.0.2
Published
Flash text in color when the text changes
Downloads
5,436
Maintainers
Readme
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