use-animate-number v1.0.5

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;
}

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