Merge pull request #4 from coolusaHD/main

Added the ability to assign an `id` to the underlying button

Author: todd-elvers

assets/index.cjs.js

@@ -1,6 +1,6 @@
 {
   "name": "react-dark-mode-toggle-2",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "description": "An updated, cute dark mode toggle button for React.",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",

package.json

@@ -79,6 +79,7 @@ function LocalDevelopment() {
           onClick={onToggleClick}
           aria-hidden="true"
           style={{ display: isLottiePlayerMounted ? "block" : "none" }}
+          id="dark-mode-toggle"
         >
           <LottiePlayerLight
             loop={false}

src/dev.tsx

@@ -26,6 +26,7 @@ const Template: Storybook.Story<Omit<DarkModeToggle.Props, "onChange">> = (props
     <DarkModeToggle
       {...props}
       isDarkMode={isDarkMode}
+      id="dark-mode-toggle"
       onChange={(isDarkMode) => {
         action("onChange")({ isDarkMode });
         console.log("onChange called:", { isDarkMode });

src/index.stories.tsx

@@ -22,14 +22,17 @@ export declare namespace DarkModeToggle {
 
     /** Optional className prop for the <button/> element (default = "") */
     readonly className?: string;
+
+    /** Allow optional id prop */
+    readonly id?: string;
   };
 }
 
 const lightToDarkSegment: AnimationSegment = [5, 50];
 const darkToLightSegment: AnimationSegment = [50, 95];
 
 export const DarkModeToggle = React.memo<DarkModeToggle.Props>(
-  ({ isDarkMode, onChange, size = 85, speed = 1.3, className = "" }) => {
+  ({ isDarkMode, onChange, size = 85, speed = 1.3, className = "", id = "" }) => {
     const [sizeValue, sizeUnit] = parseUnit(size);
     const [segments, setSegments] = React.useState<AnimationSegment>([0, 0]);
     const [goTo] = React.useState(isDarkMode ? darkToLightSegment[0] : lightToDarkSegment[0]);
@@ -55,6 +58,7 @@ export const DarkModeToggle = React.memo<DarkModeToggle.Props>(
         onClick={onToggleClick}
         aria-hidden="true"
         className={cx(buttonStyles(sizeValue, sizeUnit), className)}
+        id={id}
       >
         <LottiePlayerLight
           className={playerStyles(isLottiePlayerMounted, sizeValue, sizeUnit)}
@@ -79,7 +83,8 @@ function arePropsEqual(prevProps: DarkModeToggle.Props, nextProps: DarkModeToggl
     prevProps.size === nextProps.size &&
     prevProps.isDarkMode === nextProps.isDarkMode &&
     prevProps.speed === nextProps.speed &&
-    prevProps.className === nextProps.className
+    prevProps.className === nextProps.className &&
+    prevProps.id === nextProps.id
   );
 }