react-flip-numbers Example : Sliding Animating Numbers

React-Flip-Numbers is a React library that makes it easy to create beautiful, animated, flipping numbers in your React applications. With React-Flip-Numbers, you can easily create stock market-style numbers, timers, or counters with a smooth animation effect. In this tutorial, we will learn how to use React-Flip-Numbers step-by-step, and create an example that displays the current time.

Step 1: Installation

First, you need to install React-Flip-Numbers in your React project by running the following command in your terminal:

npm install react-flip-numbers

Step 2: Import the Component

Once you have installed React-Flip-Numbers, you can import the FlipNumbers component in your React component. Here’s an example:

import React from 'react';
import FlipNumbers from 'react-flip-numbers';

Step 3: Define the Props

React-Flip-Numbers provides several props that you can use to customize the appearance and behavior of the component. Some of the important props are:

• numbers: An array of numbers to display.
• duration: The duration of the animation in seconds.
• easingFn: A custom easing function for the animation.
• play: Specifies whether the animation should play automatically.
• style: CSS styles for the FlipNumbers component.
• numberStyle: CSS styles for each number.

Step 4: Render the Component

Once you have defined the props, you can render the FlipNumbers component in your React component. Here’s an example:

function App() {
  return (
    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
      <FlipNumbers
        numbers={[1, 2, 3, 4, 5, 6, 7, 8, 9]}
        duration={1}
        easingFn={(t, b, c, d) => c * t / d + b}
        play
        style={{ fontSize: '50px', fontWeight: 'bold' }}
        numberStyle={{ background: 'red', color: 'white', padding: '5px', borderRadius: '5px' }}
      />
    </div>
  );
}

export default App;

Step 5: Display the Current Time in IST

To display the current time in IST, you can use the Date object and update the numbers prop of the FlipNumbers component in the useEffect hook. Here’s an example:

import React, { useState, useEffect } from "react";
import FlipNumbers from "react-flip-numbers";

function App() {
  const [time, setTime] = useState(new Date().toLocaleTimeString());

  useEffect(() => {
    const intervalId = setInterval(() => {
      setTime(new Date().toLocaleTimeString());
    }, 1000);
    return () => clearInterval(intervalId);
  }, []);

  return (
    <div>
      <FlipNumbers height={40} width={80} play={true} numbers={time} />
    </div>
  );
}

export default App;

Conclusion:

The react-flip-numbers library provides a simple and flexible way to display numbers with a flip animation in React applications. By using the library and following the steps outlined in this tutorial, you can easily create dynamic, visually appealing displays for data such as current time, stock prices, or other numerical information. With the ability to customize the animation duration, style, and format, the react-flip-numbers library offers a versatile tool for creating dynamic and engaging user interfaces.