https://github.com/jonnyburger/use-color-change
📈📉React hook for flashing a text when a value becomes higher or lower
https://github.com/jonnyburger/use-color-change
change color flash hook numeric react value
Last synced: 11 months ago
JSON representation
📈📉React hook for flashing a text when a value becomes higher or lower
- Host: GitHub
- URL: https://github.com/jonnyburger/use-color-change
- Owner: JonnyBurger
- Created: 2020-02-02T10:07:28.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-05-21T08:42:03.000Z (about 4 years ago)
- Last Synced: 2025-05-17T14:42:27.626Z (about 1 year ago)
- Topics: change, color, flash, hook, numeric, react, value
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/use-color-change
- Size: 414 KB
- Stars: 32
- Watchers: 3
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
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.
```tsx
export const App = () => {
const [value, setValue] = useState(0);
const colorStyle = useColorChange(value, {
higher: 'limegreen',
lower: 'crimson',
duration: 1800
});
return
{value};
};
```
## Function signature
```ts
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`.
- `property`: _(optional)_ either `color` or `background-color`, allowing you to animate the background color instead.
### Author
© Jonny Burger
### License
MIT