react-slot-counter - npm Package Compare versions

Comparing version 1.7.3 to 1.8.0

lib/components/Slot.d.ts

 import React, { RefObject } from 'react';
 interface Props {
     charClassName?: string;
-    fontHeight: number;
     numbersRef: RefObject<HTMLDivElement>;
     active: boolean;
     isChanged: boolean;
-    slotNumbersHeight: number;
     effectiveDuration: number;
     delay: number;
-    value: string | number;
-    startValue?: string | number;
-    dummyList: (string | number)[];
+    value: string | number | JSX.Element;
+    startValue?: string | number | JSX.Element;
+    dummyList: (string | number | JSX.Element)[];
     hasInfiniteList?: boolean;
@@ -18,4 +16,4 @@ valueClassName?: string;
 }
-declare function Slot({ charClassName, fontHeight, numbersRef, active, isChanged, slotNumbersHeight, effectiveDuration, delay, value, startValue, dummyList, hasInfiniteList, valueClassName, reverse, }: Props): JSX.Element;
+declare function Slot({ charClassName, numbersRef, active, isChanged, effectiveDuration, delay, value, startValue, dummyList, hasInfiniteList, valueClassName, reverse, }: Props): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Slot>;
 export default _default;

lib/index.d.ts

 import React from 'react';
+import { SlotCounterRef, Value } from './types/common';
 interface Props {
-    value: string | number | string[];
-    startValue?: string | number | string[];
+    value: Value;
+    startValue?: Value;
     duration?: number;
-    dummyCharacters?: string[];
+    dummyCharacters?: string[] | JSX.Element[];
     dummyCharacterCount?: number;
@@ -16,10 +17,3 @@ autoAnimationStart?: boolean;
 }
-export interface SlotCounterRef {
-    startAnimation: (options?: {
-        duration?: number;
-        dummyCharacterCount?: number;
-        direction?: 'bottom-up' | 'top-down';
-    }) => void;
-}
 declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Props & React.RefAttributes<SlotCounterRef>>>;
 export default _default;

lib/index.esm.js

@@ -73,7 +73,11 @@ 'use client';
 var isNumeric = function (value) {
-  return !Number.isNaN(toNumeric(value));
+  return typeof value !== 'object' && !Number.isNaN(toNumeric(value));
 };
+var isJSXElement = function (value) {
+  return typeof value === 'object';
+};
+var isJSXElementArray = function (value) {
+  return Array.isArray(value) && isJSXElement(value[0]);
+};
 
-var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
-
 function styleInject(css, ref) {
@@ -110,9 +114,9 @@ if ( ref === void 0 ) ref = {};
 
+var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+
 function Slot(_a) {
   var charClassName = _a.charClassName,
-    fontHeight = _a.fontHeight,
     numbersRef = _a.numbersRef,
     active = _a.active,
     isChanged = _a.isChanged,
-    slotNumbersHeight = _a.slotNumbersHeight,
     effectiveDuration = _a.effectiveDuration,
@@ -134,5 +138,14 @@ delay = _a.delay,
   var valueRef = useRef(value);
+  var itemRef = useRef(null);
   var _d = useState(shuffle(dummyList)),
     dummyListState = _d[0],
     setDummyListState = _d[1];
+  var _e = useState(0),
+    fontHeight = _e[0],
+    setFontHeight = _e[1];
+  var slotNumbersHeight = fontHeight * (dummyList.length + 1);
+  useIsomorphicLayoutEffect(function () {
+    var _a, _b;
+    setFontHeight((_b = (_a = itemRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0);
+  }, []);
   useEffect(function () {
@@ -180,3 +193,4 @@ setLocalActive(active);
   }, startValue !== null && startValue !== void 0 ? startValue : localValue), renderDummyList(), React.createElement("div", {
-    className: mergeClassNames(styles.num, valueClassName)
+    className: mergeClassNames(styles.num, valueClassName),
+    ref: itemRef
   }, localValue), hasInfiniteList ? renderDummyList() : null));
@@ -207,3 +221,3 @@ }
   var serializedValue = useMemo(function () {
-    return JSON.stringify(value);
+    return isJSXElementArray(value) ? '' : JSON.stringify(value);
   }, [value]);
@@ -213,5 +227,2 @@ var _q = useState(false),
     setActive = _q[1];
-  var _r = useState(0),
-    fontHeight = _r[0],
-    setFontHeight = _r[1];
   var startAnimationOptionsRef = useRef();
@@ -276,13 +287,2 @@ var numbersRef = useRef(null);
   });
-  useIsomorphicLayoutEffect(function () {
-    var div = document.createElement('div');
-    div.style.position = 'absolute';
-    div.style.visibility = 'hidden';
-    div.innerHTML = '0';
-    if (!numbersRef.current) return;
-    numbersRef.current.appendChild(div);
-    var height = div.offsetHeight;
-    numbersRef.current.removeChild(div);
-    setFontHeight(height);
-  }, []);
   return React.createElement("div", {
@@ -294,7 +294,6 @@ className: mergeClassNames(containerClassName, styles.slot_wrap)
     var delay = (isChanged ? isChangedValueIndexList.indexOf(i) : 0) * calculatedInterval;
-    var slotNumbersHeight = fontHeight * (dummyList.length + 1);
     var prevValue = prevValueRef.current;
-    var isDecrease = value != null && prevValue != null && isNumeric(value);
-    var reverseAnimation = ((_a = startAnimationOptionsRef.current) === null || _a === void 0 ? void 0 : _a.direction) === 'top-down' || (isDecrease ? toNumeric(value) < toNumeric(prevValue) : false);
-    if (SEPARATOR.includes(v)) {
+    var isDecrease = value != null && prevValue != null && isNumeric(value) && isNumeric(prevValue) && toNumeric(value) < toNumeric(prevValue);
+    var reverseAnimation = ((_a = startAnimationOptionsRef.current) === null || _a === void 0 ? void 0 : _a.direction) === 'top-down' || isDecrease;
+    if (!isJSXElement(v) && SEPARATOR.includes(v)) {
       return React.createElement("div", {
@@ -307,3 +306,2 @@ key: valueRefList.length - i - 1,
       key: valueRefList.length - i - 1,
-      fontHeight: fontHeight,
       numbersRef: numbersRef,
@@ -313,3 +311,2 @@ active: active,
       charClassName: charClassName,
-      slotNumbersHeight: slotNumbersHeight,
       effectiveDuration: effectiveDuration,
@@ -316,0 +313,0 @@ delay: delay,

lib/index.js

@@ -75,7 +75,11 @@ 'use client';
 var isNumeric = function (value) {
-  return !Number.isNaN(toNumeric(value));
+  return typeof value !== 'object' && !Number.isNaN(toNumeric(value));
 };
+var isJSXElement = function (value) {
+  return typeof value === 'object';
+};
+var isJSXElementArray = function (value) {
+  return Array.isArray(value) && isJSXElement(value[0]);
+};
 
-var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
-
 function styleInject(css, ref) {
@@ -112,9 +116,9 @@ if ( ref === void 0 ) ref = {};
 
+var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+
 function Slot(_a) {
   var charClassName = _a.charClassName,
-    fontHeight = _a.fontHeight,
     numbersRef = _a.numbersRef,
     active = _a.active,
     isChanged = _a.isChanged,
-    slotNumbersHeight = _a.slotNumbersHeight,
     effectiveDuration = _a.effectiveDuration,
@@ -136,5 +140,14 @@ delay = _a.delay,
   var valueRef = React.useRef(value);
+  var itemRef = React.useRef(null);
   var _d = React.useState(shuffle(dummyList)),
     dummyListState = _d[0],
     setDummyListState = _d[1];
+  var _e = React.useState(0),
+    fontHeight = _e[0],
+    setFontHeight = _e[1];
+  var slotNumbersHeight = fontHeight * (dummyList.length + 1);
+  useIsomorphicLayoutEffect(function () {
+    var _a, _b;
+    setFontHeight((_b = (_a = itemRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0);
+  }, []);
   React.useEffect(function () {
@@ -182,3 +195,4 @@ setLocalActive(active);
   }, startValue !== null && startValue !== void 0 ? startValue : localValue), renderDummyList(), React.createElement("div", {
-    className: mergeClassNames(styles.num, valueClassName)
+    className: mergeClassNames(styles.num, valueClassName),
+    ref: itemRef
   }, localValue), hasInfiniteList ? renderDummyList() : null));
@@ -209,3 +223,3 @@ }
   var serializedValue = React.useMemo(function () {
-    return JSON.stringify(value);
+    return isJSXElementArray(value) ? '' : JSON.stringify(value);
   }, [value]);
@@ -215,5 +229,2 @@ var _q = React.useState(false),
     setActive = _q[1];
-  var _r = React.useState(0),
-    fontHeight = _r[0],
-    setFontHeight = _r[1];
   var startAnimationOptionsRef = React.useRef();
@@ -278,13 +289,2 @@ var numbersRef = React.useRef(null);
   });
-  useIsomorphicLayoutEffect(function () {
-    var div = document.createElement('div');
-    div.style.position = 'absolute';
-    div.style.visibility = 'hidden';
-    div.innerHTML = '0';
-    if (!numbersRef.current) return;
-    numbersRef.current.appendChild(div);
-    var height = div.offsetHeight;
-    numbersRef.current.removeChild(div);
-    setFontHeight(height);
-  }, []);
   return React.createElement("div", {
@@ -296,7 +296,6 @@ className: mergeClassNames(containerClassName, styles.slot_wrap)
     var delay = (isChanged ? isChangedValueIndexList.indexOf(i) : 0) * calculatedInterval;
-    var slotNumbersHeight = fontHeight * (dummyList.length + 1);
     var prevValue = prevValueRef.current;
-    var isDecrease = value != null && prevValue != null && isNumeric(value);
-    var reverseAnimation = ((_a = startAnimationOptionsRef.current) === null || _a === void 0 ? void 0 : _a.direction) === 'top-down' || (isDecrease ? toNumeric(value) < toNumeric(prevValue) : false);
-    if (SEPARATOR.includes(v)) {
+    var isDecrease = value != null && prevValue != null && isNumeric(value) && isNumeric(prevValue) && toNumeric(value) < toNumeric(prevValue);
+    var reverseAnimation = ((_a = startAnimationOptionsRef.current) === null || _a === void 0 ? void 0 : _a.direction) === 'top-down' || isDecrease;
+    if (!isJSXElement(v) && SEPARATOR.includes(v)) {
       return React.createElement("div", {
@@ -309,3 +308,2 @@ key: valueRefList.length - i - 1,
       key: valueRefList.length - i - 1,
-      fontHeight: fontHeight,
       numbersRef: numbersRef,
@@ -315,3 +313,2 @@ active: active,
       charClassName: charClassName,
-      slotNumbersHeight: slotNumbersHeight,
       effectiveDuration: effectiveDuration,
@@ -318,0 +315,0 @@ delay: delay,

lib/utils.d.ts

@@ -0,6 +1,10 @@
+/// <reference types="react" />
+import { Value } from './types/common';
 export declare const mergeClassNames: (...args: (string | null | undefined)[]) => string;
 export declare const range: (start: number, end: number) => number[];
 export declare const random: (min: number, max: number) => number;
-export declare const shuffle: (arr: (number | string)[]) => (string | number)[];
+export declare const shuffle: (arr: (number | string | JSX.Element)[]) => (string | number | JSX.Element)[];
 export declare const toNumeric: (value: string | string[] | number) => string | number;
-export declare const isNumeric: (value: string | string[] | number) => boolean;
+export declare const isNumeric: (value: Value) => value is string | number | string[];
+export declare const isJSXElement: (value: string | number | JSX.Element) => value is JSX.Element;
+export declare const isJSXElementArray: (value: Value) => value is JSX.Element[];

package.json

 {
   "name": "react-slot-counter",
-  "version": "1.7.3",
+  "version": "1.8.0",
   "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",

README.md

@@ -64,16 +64,16 @@ # react-slot-counter
 
-| Prop                | Type                               | Default                                | Description                                                                                                                          | Version |
-| ------------------- | ---------------------------------- | -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------- |
-| value _(required)_  | `number` \| `string` \| `string[]` |                                        | The value to be displayed. It can be a number or a string with numbers and commas.                                                   |         |
-| startValue          | `number` \| `string` \| `string[]` |                                        | The initial value to be displayed before the animation starts. It sets the beginning of the slot machine animation.                  | 1.7.0   |
-| duration            | `number`                           | `0.7`                                  | The duration of the animation in seconds.                                                                                            |         |
-| dummyCharacters     | `Array<string>`                    | 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   |
+| 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              |
+| 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              |
 
@@ -80,0 +80,0 @@ ## Ref

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

45212

increased by1.89%

Number of package files

11

increased by10%

No dependency changes