Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-slot-counter

Package Overview
Dependencies
Maintainers
1
Versions
47
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-slot-counter - npm Package Compare versions

Comparing version 1.11.0 to 1.11.1

9

lib/index.esm.js

@@ -280,10 +280,13 @@ 'use client';

var animationCountRef = useRef(0);
var _u = useState([]),
dummyList = _u[0],
setDummyList = _u[1];
var effectiveDummyCharacterCount = (_c = (_b = startAnimationOptionsRef.current) === null || _b === void 0 ? void 0 : _b.dummyCharacterCount) !== null && _c !== void 0 ? _c : dummyCharacterCount;
var effectiveDuration = (_e = (_d = startAnimationOptionsRef.current) === null || _d === void 0 ? void 0 : _d.duration) !== null && _e !== void 0 ? _e : duration;
var dummyList = useMemo(function () {
return range(0, effectiveDummyCharacterCount - 1).map(function (i) {
useEffect(function () {
setDummyList(range(0, effectiveDummyCharacterCount - 1).map(function (i) {
if (!dummyCharacters) return random(0, 10);
var index = i >= dummyCharacters.length ? random(0, dummyCharacters.length) : i;
return dummyCharacters[index];
});
}));
}, [dummyCharacters, effectiveDummyCharacterCount]);

@@ -290,0 +293,0 @@ useMemo(function () {

9

lib/index.js

@@ -282,10 +282,13 @@ 'use client';

var animationCountRef = React.useRef(0);
var _u = React.useState([]),
dummyList = _u[0],
setDummyList = _u[1];
var effectiveDummyCharacterCount = (_c = (_b = startAnimationOptionsRef.current) === null || _b === void 0 ? void 0 : _b.dummyCharacterCount) !== null && _c !== void 0 ? _c : dummyCharacterCount;
var effectiveDuration = (_e = (_d = startAnimationOptionsRef.current) === null || _d === void 0 ? void 0 : _d.duration) !== null && _e !== void 0 ? _e : duration;
var dummyList = React.useMemo(function () {
return range(0, effectiveDummyCharacterCount - 1).map(function (i) {
React.useEffect(function () {
setDummyList(range(0, effectiveDummyCharacterCount - 1).map(function (i) {
if (!dummyCharacters) return random(0, 10);
var index = i >= dummyCharacters.length ? random(0, dummyCharacters.length) : i;
return dummyCharacters[index];
});
}));
}, [dummyCharacters, effectiveDummyCharacterCount]);

@@ -292,0 +295,0 @@ React.useMemo(function () {

2

package.json
{
"name": "react-slot-counter",
"version": "1.11.0",
"version": "1.11.1",
"description": "A versatile and engaging component to display numbers in a captivating slot machine UI, perfect for enhancing user experience and grabbing attention in your web projects",

@@ -5,0 +5,0 @@ "author": "almond-bongbong",

87

README.md

@@ -1,2 +0,2 @@

# react-slot-counter
# react-slot-counter 🎰

@@ -8,2 +8,5 @@ `react-slot-counter` is a feature-rich React component that displays numbers and strings with an engaging slot machine animation effect.

![Size](https://img.shields.io/bundlephobia/min/react-confetti-boom)
![NPM Downloads](https://img.shields.io/npm/dw/react-slot-counter.svg)
<br>
[![Deploy to GitHub Pages](https://github.com/almond-bongbong/react-slot-counter/actions/workflows/deploy_to_github_pages.yml/badge.svg)](https://github.com/almond-bongbong/react-slot-counter/actions/workflows/deploy_to_github_pages.yml)

@@ -16,3 +19,3 @@ <p align="center">

## Features
## 🌟 Features

@@ -30,3 +33,3 @@ - **Flexible Inputs**: Support for displaying numbers, strings, and JSX elements. You can even use a combination of these in a single slot counter instance!

## Installation
## 📦 Installation

@@ -39,3 +42,3 @@ To install the package, run the following command:

## Usage
## 🛠 Usage

@@ -63,41 +66,46 @@ Import `SlotCounter` and use it in your component. Here's a simple example:

## Demo
## 🎥 Demo
For more examples of usage and available options, check out the [demo page](https://almond-bongbong.github.io/react-slot-counter/).
## Props
## 📝 Props
| Prop | Type | Default | Description | Version |
| ----------------------- | ----------------------------------------------------- | -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
| value _(required)_ | `number` \| `string` \| `string[]` \| `JSX.Element[]` | | The value to be displayed. It can be a number or a string with numbers and commas. | JSX.Element: 1.8.0 |
| 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. | 1.7.0 |
| 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. | 1.10.0 |
| duration | `number` | `0.7` | The duration of the animation in seconds. | |
| 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. | 1.4.2 |
| 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. | 1.4.3 |
| sequentialAnimationMode | `boolean` | `false` | Determines if the animation should increment or decrement sequentially from the startValue to value instead of random animation. | 1.9.0 |
| useMonospaceWidth | `boolean` | `false` | Ensures that all numeric characters occupy the same horizontal space, just like they would in a monospace font. | 1.9.0 |
| debounceDelay | `number` | `0` | Specifies the delay in milliseconds for debouncing animations. When the value changes rapidly, it allows the animation to execute smoothly. | 1.11.0 |
| 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. |
| 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. |
| 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. |
| debounceDelay | `number` | `0` | Specifies the delay in milliseconds for debouncing animations. When the value changes rapidly, it allows the animation to execute smoothly. |
## Ref
## 🤖 Ref
You can access the SlotCounter component using a ref. This ref can be used to start the animation of the component.
You can manipulate the SlotCounter component's behavior using a ref.
| Method | Description |
| ---------------- | ------------------------------------ |
| `startAnimation` | Start the animation of the component |
| Method | Type | Description |
| ---------------- | ----------------------------- | -------------------------------------------------------------------------------- |
| `startAnimation` | `(options?: Options) => void` | Initiates the animation of the component with optional customization parameters. |
The `startAnimation` method accepts an optional object with the following properties:
### Options Object
- `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.
The `options` object accepts the following properties for customizing the component's behavior:
- **`duration`**: (Optional) A number representing the duration of the animation in seconds. This will override the `duration` prop if provided.
- **`dummyCharacterCount`**: (Optional) A number indicating how many dummy characters should be shown in the animation before the target character is displayed. This will override the `dummyCharacterCount` prop if provided.
- **`direction`**: (Optional) A string that sets the direction of the slot machine animation. Accepted values are `'bottom-top'` and `'top-bottom'`. The default value is `'bottom-top'`.
- **`'bottom-top'`**: The animation will start from the bottom and move towards the top.
- **`'top-bottom'`**: The animation will start from the top and move downwards.
Example:

@@ -127,12 +135,17 @@

## Contributing
## 📜 Change Log
For a detailed list of changes, check out the [CHANGELOG.md](./CHANGELOG.md) file.
## 👨‍💻 Contributing
Contributions are always welcome!
## Support Us
## ❤️ Enjoying this repository?
If you find this library useful, consider giving us a star on [GitHub!](https://github.com/almond-bongbong/react-slot-counter/stargazers) Your support is greatly appreciated and it helps the project grow.
Show your support by giving a star! ⭐
And don't forget to follow me on GitHub for more exciting projects!
## License
## 📄 License
This project is licensed under the MIT License.
lib/index.esm.js.map

Sorry, the diff of this file is not supported yet

lib/index.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc