React Slot Counter 🎰 - Make Your UI Count! ✨

🚀 Elevate Your UI with Dynamic, Eye-Catching Counters - React Slot Counter

Make Your Numbers Pop 🌟: Simple and Dynamic Counters for Your UI

🚀 What's New in 3.0.0?

Key Changes

• New Prop: speed: Adjust animation speed more intuitively with the new speed prop.
• New Prop: delay: Each column's animation start can now be delayed using the delay prop.

<a target="_blank" href="https://almond-bongbong.github.io/react-slot-counter/">
    <img src="https://github.com/almond-bongbong/react-slot-counter/raw/main/docs/preview.gif" />
</a>

💡 Why React Slot Counter?

React Slot Counter is your go-to solution for adding animated, interactive counters to your web applications. With customizable animations, diverse input compatibility, and easy integration, it's designed to make your numbers not just visible but visually striking.

🌟 Key Features

• Versatile Inputs: Beyond numbers—strings, JSX elements, and more.
• Animation on Demand: Updates animate only the changed elements.
• Sequential Animation: For that extra touch of order and purpose.
• Total Customizability: Tailor the look and feel to fit your app perfectly.

📦 Quick Installation

npm install react-slot-counter

🛠 Easy Usage

Import SlotCounter and use it in your component. Here's a simple example:

import React from 'react';
import SlotCounter from 'react-slot-counter';

function App() {
  return (
    <>
      <SlotCounter value={123456} />
      <SlotCounter value={36.5} />
      <SlotCounter value="1,234,567" />
      <SlotCounter value={['1', '2', '3', '4', '5', '6']} />
      <SlotCounter value="??????" />
    </>
  );
}

export default App;

🎥 Live Demo

Explore more at the demo page.

📝 Comprehensive Props

Detailed props for customizing SlotCounter to fit your UI needs:

• value (required): Display numbers, strings, or JSX elements.
• duration: Control the speed of the animation.
• animateUnchanged: Choose to animate all or only changed characters.
• And many more!

See full props list