react-slot-counter

react-slot-counter is a feature-rich React component that displays numbers and strings with an engaging slot machine animation effect.

Features

• Flexible Inputs: Support for displaying numbers, strings, and JSX elements. You can even use a combination of these in a single slot counter instance!
• Animated Changes: Only the characters that change get animated, bringing life and motion to your app's interface.
• Customize Animation Settings: Control the duration of the animation, or decide whether to start the animation automatically upon mounting.
• Sequential Animation Mode: A unique feature that provides the option to animate the numbers incrementally or decrementally from the start value to the target value, rather than a random animation.
• Monospace Font Support: The useMonospaceWidth prop ensures that all numeric characters occupy the same horizontal space as they would in a monospace font.
• Infinite List Appearance: Option to make the list appear as continuous, seamlessly connecting the end of the target character to the beginning.
• Style Customization: Easily add custom styles to the characters, separators, and overall container. You can even customize the class name for the slot value.
• Ref Support: Control the animation start with a ref for increased flexibility.

Immerse your users in an interactive, engaging, and enjoyable experience with react-slot-counter. Whether you're displaying user scores, loading status, or real-time data, react-slot-counter adds that extra 'spin' to your numbers and strings.

Installation

To install the package, run the following command:

npm install react-slot-counter

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;

Demo

For more examples of usage and available options, check out the demo page.

Props

Ref

You can access the SlotCounter component using a ref. This ref can be used to start the animation of the component.

The startAnimation method accepts an optional object with the following properties:

• duration: The duration of the animation in seconds. Overrides the duration prop.
• dummyCharacterCount: The number of dummy characters to be displayed in the animation before reaching the target character. Overrides the dummyCharacterCount prop.
• direction: This option determines the direction of the slot machine animation. The accepted values are bottom-top and top-bottom. The default value is bottom-top. If bottom-top is chosen, the animation will start from the bottom and move towards the top. If top-bottom is chosen, the animation will start from the top and move downwards.

Example:

import React, { useRef } from 'react';
import SlotCounter, { SlotCounterRef } from 'react-slot-counter';

function App() {
  const counterRef = useRef < SlotCounterRef > null;

  const handleStartClick = () => {
    counterRef.current?.startAnimation();
  };

  return (
    <>
      <SlotCounter value={123456} ref={counterRef} />
      <button onClick={handleStartClick}>Start</button>
    </>
  );
}

export default App;

Contributing

Contributions are always welcome!

Support Us

If you find this library useful, consider giving us a star on GitHub! Your support is greatly appreciated and it helps the project grow.

License

This project is licensed under the MIT License.