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: about 2 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 4 years ago)
• Default Branch: master
• Last Pushed: 2022-05-21T08:42:03.000Z (over 2 years ago)
• Last Synced: 2024-04-26T06:20:38.666Z (5 months 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: 4
• 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