React hook for flashing a text when a value becomes higher or lower. use-color-change
This module can be used in any React project that supports hooks.
npm i use-color-change
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>
)
}
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 pass null
for no animation.lower
: The color which should be flashing when the value decreases. You can pass null
for no animation.duration
: (optional) How long the flash should take in miliseconds. Default is 1800
.© Jonny Burger
GitHub: https://github.com/JonnyBurger/use-color-change
#reactjs #javascript #react