add isEnabled prop

Author: areknow

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-use-cursor-follow",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "A React hook that creates a smooth customizable animated cursor element that follows your mouse",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

src/types.ts

@@ -1,4 +1,9 @@
 export interface CursorFollowOptions {
+  /**
+   * Whether to enable the mouse follower
+   * @default true
+   */
+  isEnabled?: boolean;
   /**
    * The easing factor for the mouse follower animation
    * @default 0.1

src/use-cursor-follow.md

@@ -22,10 +22,12 @@ function InteractiveDemo() {
   const [color, setColor] = React.useState(0);
   const [borderRadius, setBorderRadius] = React.useState("100%");
   const [hideCursor, setHideCursor] = React.useState(true);
+  const [isEnabled, setIsEnabled] = React.useState(true);
   const [fadeDuration, setFadeDuration] = React.useState(200);
   const [fadeDistance, setFadeDistance] = React.useState(10);
 
   useCursorFollow({
+    isEnabled,
     easingFactor,
     updateInterval,
     size,
@@ -312,6 +314,41 @@ function InteractiveDemo() {
             </div>
           </label>
         </div>
+
+        {/* Hide Cursor */}
+        <div>
+          <label
+            style={{
+              display: "block",
+              marginBottom: "0.5rem",
+              fontWeight: "bold",
+              color: "#555",
+            }}
+          >
+            ⚡️ Enable hook: {isEnabled ? "Yes" : "No"}
+          </label>
+          <label style={{ display: "flex", alignItems: "center" }}>
+            <input
+              type="checkbox"
+              checked={isEnabled}
+              onChange={(e) => setIsEnabled(e.target.checked)}
+              style={{
+                width: "20px",
+                height: "20px",
+                cursor: "pointer",
+              }}
+            />
+            <div
+              style={{
+                fontSize: "0.8rem",
+                color: "#666",
+                marginLeft: "5px",
+              }}
+            >
+              Enable the cursor follow hook
+            </div>
+          </label>
+        </div>
       </div>
     </div>
   );

src/use-cursor-follow.ts

@@ -10,6 +10,7 @@ const CURSOR_HIDE_STYLE_ID = "react-use-cursor-follow-hide-cursor";
  */
 const useCursorFollow = (props?: CursorFollowOptions) => {
   const {
+    isEnabled = true,
     easingFactor = 0.1,
     updateInterval = 15,
     size = 14,
@@ -43,6 +44,21 @@ const useCursorFollow = (props?: CursorFollowOptions) => {
 
   // Main cursor logic
   useEffect(() => {
+    if (!isEnabled) {
+      // Clean up DOM element and cursor styles when disabled
+      if (elementRef.current) {
+        elementRef.current.remove();
+        elementRef.current = null;
+      }
+      document.documentElement.style.cursor = "";
+      document.body.style.cursor = "";
+      const existingStyle = document.getElementById(CURSOR_HIDE_STYLE_ID);
+      if (existingStyle) {
+        existingStyle.remove();
+      }
+      return;
+    }
+
     // Function to create the cursor element
     const createCursorElement = (x: number, y: number) => {
       if (elementRef.current) return; // Element already exists
@@ -254,6 +270,7 @@ const useCursorFollow = (props?: CursorFollowOptions) => {
       }
     };
   }, [
+    isEnabled,
     easingFactor,
     updateInterval,
     fadeDistance,