Gathering detailed insights and metrics for react-slot-counter
Gathering detailed insights and metrics for react-slot-counter
Installations
npm install react-slot-counterDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Min. Node Version
>=16.0.0
Node Version
16.20.2
NPM Version
8.19.4
Releases
49
Languages
5
TypeScript
CSS
HTML
JavaScript
SCSS
TypeScript (87.89%)
CSS (6.61%)
HTML (2.69%)
JavaScript (2.14%)
SCSS (0.66%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
154 Stars
240 Commits
14 Forks
1 Watchers
22 Branches
6 Contributors
Updated on Jul 07, 2025
Maintainers
1
Package Meta Information
Latest Version
3.3.1
Package Id
react-slot-counter@3.3.1
Unpacked Size
60.60 kB
Size
14.99 kB
File Count
14
NPM Version
8.19.4
Node Version
16.20.2
Published on
Apr 17, 2025
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
25
@babel/core@rollup/plugin-babel@rollup/plugin-commonjs@rollup/plugin-eslint@rollup/plugin-node-resolve@rollup/plugin-terser@types/react@typescript-eslint/eslint-plugin@typescript-eslint/parsereslinteslint-plugin-reacteslint-plugin-react-hooksgh-pagespostcssprettierreactreact-domrolluprollup-plugin-banner2rollup-plugin-peer-deps-externalrollup-plugin-postcssrollup-plugin-typescript2sasstslibtypescript
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 newspeedprop. - New Prop:
delay: Each column's animation start can now be delayed using thedelayprop.
💡 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
1npm install react-slot-counter
🛠 Easy Usage
Import SlotCounter and use it in your component. Here's a simple example:
1import React from 'react'; 2import SlotCounter from 'react-slot-counter'; 3 4function App() { 5 return ( 6 <> 7 <SlotCounter value={123456} /> 8 <SlotCounter value={36.5} /> 9 <SlotCounter value="1,234,567" /> 10 <SlotCounter value={['1', '2', '3', '4', '5', '6']} /> 11 <SlotCounter value="??????" /> 12 </> 13 ); 14} 15 16export 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
| Prop | Type | Default | Description |
|---|---|---|---|
| value (required) | number | string | string[] | JSX.Element[] | The value to be displayed. It can be a number or a string with numbers and commas. | |
| startValue | number | string | string[] | JSX.Element[] | The initial value to be displayed before the animation starts. It sets the beginning of the slot machine animation. | |
| startValueOnce | boolean | false | If set to true, the animation starts from the startValue only for the first render. For subsequent animations, it starts from the last value. |
| duration | number | 0.7 | The duration of the animation in seconds. |
| speed | number | 1.4 | The speed of counter when running. |
| delay | number | The delay time of each columns | |
| dummyCharacters | string[] | JSX.Element[] | Defaults to random numbers from 0 to 9 | An array of dummy characters to be used in the animation. |
| dummyCharacterCount | number | 6 | The number of dummy characters to be displayed in the animation before reaching the target character. |
| autoAnimationStart | boolean | true | Determines whether the animation should start automatically when the component is first mounted. |
| animateUnchanged | boolean | false | Determines whether to animate only the characters that have changed. |
| hasInfiniteList | boolean | false | Determines whether the list should appear as continuous, with the end of the target character seamlessly connected to the beginning. |
| containerClassName | string | The class name of container. | |
| charClassName | string | The class name of each character. | |
| separatorClassName | string | The class name of the separator character (. or ,). | |
| valueClassName | string | The class name for the value of the slot, making it possible to customize the styling and visibility of the value. | |
| numberSlotClassName | string | The class name for the number slot, allowing you to customize the styling of the number slot. | |
| numberClassName | string | The class name for the number, allowing you to customize the styling of the number. | |
| sequentialAnimationMode | boolean | false | Determines if the animation should increment or decrement sequentially from the startValue to value instead of random animation. |
| useMonospaceWidth | boolean | false | Ensures 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'. |
| debounceDelay | number | 0 | Specifies the delay in milliseconds for debouncing animations. When the value changes rapidly, it allows the animation to execute smoothly. |
| animateOnVisible | boolean | rootMargin: string, triggerOnce: boolean | false | rootMargin: '0px', triggerOnce: false | Activates 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). |
| startFromLastDigit | boolean | false | Determines the order in which the digits animate. When set to true, the animation will start from the last digit and progress backward to the first digit. When false, the animation will start from the first digit and proceed forward. |
| onAnimationStart | () => void | Callback function that is called when the animation starts. | |
| onAnimationEnd | () => void | Callback function that is called when the animation completes. | |
| separatorCharacters | string[] | undefined | Defines custom separator characters. When provided, only these characters will be treated as separators. For example, separatorCharacters={[':']} will treat colons as separators in "12:34:56". |
| isSeparatorCharacter | ((value: string | JSX.Element) => boolean) | null | defaultIsSeparatorCharacter | A function to determine if a value should be treated as a separator. Set to null to disable all separators. When provided along with separatorCharacters, separatorCharacters takes precedence. |
| slotPeek | number | Controls the visibility of adjacent numbers in the slot machine effect. Set the value in pixels to determine how much of the previous and next numbers should be visible. Higher values will show more of the adjacent numbers. |
🤖 Advanced Ref Usage
Manipulate the behavior with refreshStyles and startAnimation methods.
Learn more
| Method | Type | Description |
|---|---|---|
refreshStyles | () => void | Recalculates 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) => void | Initiates the animation of the component with optional customization parameters. |
reload | () => void | Forces a complete re-render of the SlotCounter component. Useful for scenarios where you need to reset the component's state or refresh its appearance after dynamic style changes. |
Options for startAnimation Method
| Property | Type | Optional | Default | Description |
|---|---|---|---|---|
duration | number | Yes | None | A number representing the duration of the animation in seconds. Overrides the duration prop if provided. |
dummyCharacterCount | number | Yes | None | A number indicating how many dummy characters should be shown before the target character. Overrides the dummyCharacterCount prop if provided. |
direction | string | Yes | 'bottom-top' | Sets the direction of the slot machine animation. Accepted values: 'bottom-top', 'top-bottom'. Overrides the direction prop if provided. |
Ref Example:
1import React, { useRef } from 'react'; 2import SlotCounter from 'react-slot-counter'; 3 4function App() { 5 const counterRef = useRef(null); 6 7 const handleStartClick = () => { 8 counterRef.current?.startAnimation(); 9 }; 10 11 return ( 12 <> 13 <SlotCounter value={123456} ref={counterRef} /> 14 <button onClick={handleStartClick}>Start</button> 15 </> 16 ); 17} 18 19export 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.
✨ Contributors
Thanks go to these wonderful people:
Max |
Nick - Ngoc Pham |
Vincent Huang |
larsjuvik |
Enes Can ÇETİNER |
Bảo Hà. |
❤️ Like Our Work?
Support us with a star ⭐ on GitHub!
📄 License
This project is proudly licensed under the MIT License.
No vulnerabilities found.
No security vulnerabilities found.