Merge pull request #78 from almond-bongbong/76-expose-extra-props-to-…

…allow-users-to-control-what-is-considered-the-separator-character-as-well Add separator customization options
almond-bongbong · Feb 7, 2025 · a0ab0e3 · a0ab0e3
2 parents 8a320c8 + 8d802dc
commit a0ab0e3
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -109,6 +109,8 @@ Detailed props for customizing SlotCounter to fit your UI needs:
 | 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](https://github.com/almond-bongbong/react-slot-counter/blob/main/src/utils.ts#L75)                          | 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.                                                                                |
 
 </details>
 

diff --git a/src/index.tsx b/src/index.tsx
@@ -19,7 +19,7 @@ import {
   generateCyclicRange,
   isJSXElementArray,
   isNumeric,
-  isSeparatorCharacter,
+  isSeparatorCharacter as defaultIsSeparatorCharacter,
   mergeClassNames,
   random,
   range,
@@ -57,6 +57,8 @@ interface Props {
   startFromLastDigit?: boolean;
   onAnimationStart?: () => void;
   onAnimationEnd?: () => void;
+  separatorCharacters?: string[];
+  isSeparatorCharacter?: ((value: string | JSX.Element) => boolean) | null;
 }
 
 function SlotCounter(
@@ -86,6 +88,8 @@ function SlotCounter(
     startFromLastDigit = false,
     onAnimationStart,
     onAnimationEnd,
+    separatorCharacters,
+    isSeparatorCharacter = defaultIsSeparatorCharacter,
   }: Props,
   ref: React.Ref<SlotCounterRef>,
 ) {
@@ -486,8 +490,28 @@ function SlotCounter(
     startAnimationAll,
   ]);
 
+  /**
+   * Check if the value is a separator character
+   * @param value - The value to check
+   * @returns true if the value is a separator character, false otherwise
+   */
+  const checkSeparator = (value: string | JSX.Element) => {
+    // If separatorCharacters is provided, check if the value is in the separatorCharacters array
+    if (separatorCharacters && typeof value === 'string') {
+      return separatorCharacters.includes(value);
+    }
+
+    // If isSeparatorCharacter is null, return false (no separator)
+    if (isSeparatorCharacter === null) {
+      return false;
+    }
+
+    // If isSeparatorCharacter is provided or defaultIsSeparatorCharacter, use that to check if the value is a separator character
+    return isSeparatorCharacter(value);
+  };
+
   const isChangedValueIndexListWithoutSeparator = isChangedValueIndexList.filter(
-    (i) => !isSeparatorCharacter(renderValueList[i]),
+    (i) => !checkSeparator(renderValueList[i]),
   );
 
   let noSeparatorValueIndex = -1;
@@ -518,7 +542,7 @@ function SlotCounter(
         if (direction) reverseAnimation = direction === 'top-down';
 
         // Separator check
-        const isSeparator = isSeparatorCharacter(v);
+        const isSeparator = checkSeparator(v);
 
         // Separator rendering
         if (isSeparator) {