Socket
Socket
Sign inDemoInstall

react-slot-counter

Package Overview
Dependencies
5
Maintainers
1
Versions
42
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    react-slot-counter

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


Version published
Maintainers
1
Install size
47.6 kB
Created

Changelog

Source

[2.3.1] - 2024-04-27

Fixed

  • Fixed an issue where the font width was incorrectly calculated when using useMonospaceWidth.

Readme

Source

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

NPM License Size NPM Downloads
Deploy to GitHub Pages

💡 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
PropTypeDefaultDescription
value (required)number | string | string[] | JSX.Element[]The value to be displayed. It can be a number or a string with numbers and commas.
startValuenumber | string | string[] | JSX.Element[]The initial value to be displayed before the animation starts. It sets the beginning of the slot machine animation.
startValueOncebooleanfalseIf set to true, the animation starts from the startValue only for the first render. For subsequent animations, it starts from the last value.
durationnumber0.7The duration of the animation in seconds.
dummyCharactersstring[] | JSX.Element[]Defaults to random numbers from 0 to 9An array of dummy characters to be used in the animation.
dummyCharacterCountnumber6The number of dummy characters to be displayed in the animation before reaching the target character.
autoAnimationStartbooleantrueDetermines whether the animation should start automatically when the component is first mounted.
animateUnchangedbooleanfalseDetermines whether to animate only the characters that have changed.
hasInfiniteListbooleanfalseDetermines whether the list should appear as continuous, with the end of the target character seamlessly connected to the beginning.
containerClassNamestringThe class name of container.
charClassNamestringThe class name of each character.
separatorClassNamestringThe class name of the separator character (. or ,).
valueClassNamestringThe class name for the value of the slot, making it possible to customize the styling and visibility of the value.
numberSlotClassNamestringThe class name for the number slot, allowing you to customize the styling of the number slot.
numberClassNamestringThe class name for the number, allowing you to customize the styling of the number.
sequentialAnimationModebooleanfalseDetermines if the animation should increment or decrement sequentially from the startValue to value instead of random animation.
useMonospaceWidthbooleanfalseEnsures that all numeric characters occupy the same horizontal space, just like they would in a monospace font.
direction'bottom-top' | 'top-bottom''bottom-top'Sets the direction of the slot machine animation. Accepted values are 'bottom-top' and 'top-bottom'.
debounceDelaynumber0Specifies the delay in milliseconds for debouncing animations. When the value changes rapidly, it allows the animation to execute smoothly.
animateOnVisibleboolean | rootMargin: string, triggerOnce: booleanfalse | rootMargin: '0px', triggerOnce: falseActivates the animation when the component is visible in the viewport. rootMargin sets the margin around the viewport for triggering the animation, while triggerOnce determines if the animation should occur only once (true) or every time the component becomes visible (false).

🤖 Advanced Ref Usage

Manipulate the behavior with refreshStyles and startAnimation methods.

Learn more
MethodTypeDescription
refreshStyles() => voidRecalculates the styles for the SlotCounter component. Useful for scenarios where the font size changes or the window is resized, forcing a re-render to apply the new styles.
startAnimation(options?: Options) => voidInitiates the animation of the component with optional customization parameters.

Options for startAnimation Method

PropertyTypeOptionalDefaultDescription
durationnumberYesNoneA number representing the duration of the animation in seconds. Overrides the duration prop if provided.
dummyCharacterCountnumberYesNoneA number indicating how many dummy characters should be shown before the target character. Overrides the dummyCharacterCount prop if provided.
directionstringYes'bottom-top'Sets the direction of the slot machine animation. Accepted values: 'bottom-top', 'top-bottom'. Overrides the direction prop if provided.

Ref Example:

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

function App() {
  const counterRef = useRef(null);

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

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

export default App;

📜 Stay Updated

Check out our CHANGELOG.md for the latest updates.

👨‍💻 Join the Community

Your contributions are welcome! Let's make this project even better together.

❤️ Like Our Work?

Support us with a star ⭐ on GitHub!

📄 License

This project is proudly licensed under the MIT License.

Keywords

FAQs

Last updated on 27 Apr 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc