✨ add speed and delay properties

tuanngocptn · May 20, 2024 · c3ca745 · c3ca745
1 parent 4716819
commit c3ca745
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -79,6 +79,8 @@ Detailed props for customizing SlotCounter to fit your UI needs:
 | 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.5`                                                | The speed of 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.                                                                                                                                                                                     |

diff --git a/src/index.tsx b/src/index.tsx
@@ -36,6 +36,8 @@ interface Props {
   startValue?: Value;
   startValueOnce?: boolean;
   duration?: number;
+  speed?: number;
+  delay?: number;
   dummyCharacters?: string[] | JSX.Element[];
   dummyCharacterCount?: number;
   autoAnimationStart?: boolean;
@@ -62,6 +64,8 @@ function SlotCounter(
     startValue,
     startValueOnce = false,
     duration = 0.7,
+    speed = 1.5,
+    delay,
     dummyCharacters,
     dummyCharacterCount = 6,
     autoAnimationStart: _autoAnimationStart = true,
@@ -171,14 +175,14 @@ function SlotCounter(
    */
   useEffect(() => {
     setDummyList(
-      range(0, effectiveDummyCharacterCount - 1).map((i) => {
+      range(0, effectiveDummyCharacterCount * duration * speed - 1).map((i) => {
         if (!dummyCharacters) return random(0, 10);
 
         const index = i >= dummyCharacters.length ? random(0, dummyCharacters.length) : i;
         return dummyCharacters[index];
       }),
     );
-  }, [dummyCharacters, effectiveDummyCharacterCount]);
+  }, [dummyCharacters, effectiveDummyCharacterCount, speed, duration]);
 
   /**
    * Update valueRef and prevValueRef when value is changed
@@ -228,8 +232,11 @@ function SlotCounter(
    */
   const calculatedInterval = useMemo(() => {
     const MAX_INTERVAL = 0.1;
+    if (delay) {
+      return delay;
+    }
     return Math.min(MAX_INTERVAL, effectiveDuration / valueList.length);
-  }, [effectiveDuration, valueList.length]);
+  }, [effectiveDuration, valueList.length, delay]);
 
   /**
    * Start animation