feat: add onVisibilityChanged to interface

yhattav · Nov 20, 2024 · 2ec8755 · 2ec8755
1 parent 107ebd5
commit 2ec8755
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -46,17 +46,18 @@ function App() {
 
 ## Props
 
-| Prop           | Type                             | Default | Description                                              |
-| -------------- | -------------------------------- | ------- | -------------------------------------------------------- |
-| `children`     | `ReactNode`                      | -       | The component to use as cursor                           |
-| `className`    | `string`                         | `''`    | Additional CSS classes                                   |
-| `style`        | `CSSProperties`                  | `{}`    | Additional inline styles                                 |
-| `offsetX`      | `number`                         | `0`     | Horizontal offset from cursor position                   |
-| `offsetY`      | `number`                         | `0`     | Vertical offset from cursor position                     |
-| `zIndex`       | `number`                         | `9999`  | Z-index of the cursor element                            |
-| `smoothFactor` | `number`                         | `1`     | Movement smoothing (1 = no smoothing, higher = smoother) |
-| `containerRef` | `RefObject<HTMLElement>`         | -       | Reference to container element for bounded cursor        |
-| `onMove`       | `(x: number, y: number) => void` | -       | Callback fired on cursor movement                        |
+| Prop                  | Type                             | Default | Description                                              |
+| --------------------- | -------------------------------- | ------- | -------------------------------------------------------- |
+| `children`            | `ReactNode`                      | -       | The component to use as cursor                           |
+| `className`           | `string`                         | `''`    | Additional CSS classes                                   |
+| `style`               | `CSSProperties`                  | `{}`    | Additional inline styles                                 |
+| `offsetX`             | `number`                         | `0`     | Horizontal offset from cursor position                   |
+| `offsetY`             | `number`                         | `0`     | Vertical offset from cursor position                     |
+| `zIndex`              | `number`                         | `9999`  | Z-index of the cursor element                            |
+| `smoothFactor`        | `number`                         | `1`     | Movement smoothing (1 = no smoothing, higher = smoother) |
+| `containerRef`        | `RefObject<HTMLElement>`         | -       | Reference to container element for bounded cursor        |
+| `onMove`              | `(x: number, y: number) => void` | -       | Callback fired on cursor movement                        |
+| `onVisibilityChanged` | `(isVisible: boolean) => void`   | -       | Callback fired when cursor visibility changes            |
 
 ## Advanced Usage
 
@@ -120,6 +121,30 @@ function InteractiveCursor() {
 }
 ```
 
+### Visibility Change Handler
+
+```tsx
+function VisibilityAwareCursor() {
+  const handleVisibilityChange = (isVisible: boolean) => {
+    console.log('Cursor visibility:', isVisible);
+  };
+
+  return (
+    <CustomCursor onVisibilityChanged={handleVisibilityChange}>
+      <div
+        style={{
+          width: '20px',
+          height: '20px',
+          backgroundColor: '#3b82f6',
+          borderRadius: '50%',
+          transform: 'translate(-50%, -50%)',
+        }}
+      />
+    </CustomCursor>
+  );
+}
+```
+
 ## Development
 
 To start development, you can run both the component and the example app concurrently using:
@@ -157,6 +182,9 @@ const MyComponent: React.FC = () => {
       containerRef={containerRef}
       smoothFactor={2}
       onMove={(x: number, y: number) => console.log(x, y)}
+      onVisibilityChanged={(isVisible: boolean) =>
+        console.log('Visible:', isVisible)
+      }
     >
       {/* Your cursor content */}
     </CustomCursor>

diff --git a/src/CustomCursor.tsx b/src/CustomCursor.tsx
@@ -14,6 +14,7 @@ export interface CustomCursorProps {
   containerRef?: React.RefObject<HTMLElement>;
   onMove?: (x: number, y: number) => void;
   hideNativeCursor?: boolean;
+  onVisibilityChanged?: (isVisible: boolean) => void;
 }
 
 const ANIMATION_DURATION = '0.3s';
@@ -89,10 +90,10 @@ export const CustomCursor: React.FC<CustomCursorProps> = React.memo(
     containerRef,
     onMove,
     hideNativeCursor = true,
+    onVisibilityChanged,
   }) => {
     const { position, setPosition, targetPosition, isVisible } =
       useMousePosition(containerRef, offsetX, offsetY);
-    console.log('>>>>>>>>>>>>isVisible', isVisible);
     useSmoothAnimation(position, targetPosition, smoothFactor, setPosition);
 
     const [portalContainer, setPortalContainer] =
@@ -145,6 +146,10 @@ export const CustomCursor: React.FC<CustomCursorProps> = React.memo(
       }
     }, [position, onMove]);
 
+    React.useEffect(() => {
+      onVisibilityChanged?.(isVisible);
+    }, [isVisible, onVisibilityChanged]);
+
     const cursorStyle = React.useMemo(
       () =>
         ({
@@ -176,7 +181,6 @@ export const CustomCursor: React.FC<CustomCursorProps> = React.memo(
     //     !portalContainer
     //   ),
     // });
-    console.log('>>>>>>>>>>>>position', position);
     if (
       !isVisible ||
       position.x === null ||