grsoares21 / use-animate-number

React hook for smooth number change to use as animation base

useAnimateNumber react hook

A React Hook for making value change smoothly to create animation base

---

• Installation
• Options
• Skip Animation

---

When creating a custom animation with react, useAnimateNumber hook handle tha value change from the start value to the end smoothly with easing functions.

Installation

$ yarn add use-animate-number

It's like useState with number type.

Import

import useAnimateNumber from 'use-animate-number';

Usage

const Component = () => {
  const [value, setValue] = useAnimateNumber(0, options)
  return (...)
}

Options

options object can be passed as second argument of the function to customize the animation. Here are the default options;

{
  duration: 1000,
  enterance: true,
  direct: false,
  disabled: false,
  decimals: 2;
}

Name	Type	Default	Description
duration	number	1000	Duration of animation to be done in milliseconds
enterance	boolean	true	Will run animation to initial value from 0 at start.
direct	boolean	false	For simple usage, instead of using update function, it will animate the value when initial argument is set.
disabled	boolean	false	Disable the animation and value change will be done instantly.
decimals	number	2	The decimal to be included to the calculation.

options.direct

If you don't need extra logic, you can ignore using the update function by setting direct option.

const [animateValue] = useAnimateNumber(0, { direct: true });

Skip Animation

To skip animation for a state update, second argument can be used.

const [value, setValue] = useAnimateNumber(0);

setCurrentValue(0, true); // It will instantly set the value as 0 in no time
setCurrentValue(100); // It will work as usual