react-magic-card 0.0.6 → 0.0.8

package/dist/MagicCircle/index.js

@@ -80,9 +80,9 @@ const MagicCircle = ({ images, width, height, radius, controller, start, dynamic
         if (!range || !hasDelayed)
             return;
         // Add handle event when component mount and deps update.
-        range.addEventListener('wheel', handleWheel);
-        range.addEventListener('touchstart', handleTouchStart);
-        range.addEventListener('touchmove', handleTouchMove);
+        range.addEventListener('wheel', handleWheel, { passive: true });
+        range.addEventListener('touchstart', handleTouchStart, { passive: true });
+        range.addEventListener('touchmove', handleTouchMove, { passive: true });
         // Clean up event and timeId when component is unmount.
         return () => {
             range.removeEventListener('wheel', handleWheel);
@@ -93,13 +93,14 @@ const MagicCircle = ({ images, width, height, radius, controller, start, dynamic
     }, [handleTouchMove, handleWheel, hasDelayed, wheelDelay]);
     // Functions of the controller.
     // entry ref area.
-    const enterControll = (e) => {
-        e.preventDefault();
+    const enterControll = () => {
         document.body.style.overflow = 'hidden';
+        document.body.style.overscrollBehavior = 'none';
     };
     // leave ref area.
     const leaveControll = () => {
         document.body.style.overflow = 'auto';
+        document.body.style.overscrollBehavior = 'auto';
     };
     // Added event when component is mounted.
     (0, react_1.useEffect)(() => {
@@ -107,16 +108,16 @@ const MagicCircle = ({ images, width, height, radius, controller, start, dynamic
         if (!range)
             return;
         // Add event.
-        range.addEventListener('mouseover', enterControll, { passive: false });
+        range.addEventListener('mouseover', enterControll);
         range.addEventListener('mouseout', leaveControll);
-        range.addEventListener('touchstart', enterControll, { passive: false });
-        range.addEventListener('touchout', leaveControll);
+        range.addEventListener('touchstart', enterControll);
+        range.addEventListener('touchend', leaveControll);
         // Clean up event when component is unmount.
         return () => {
             range.removeEventListener('mouseover', enterControll);
             range.removeEventListener('mouseout', leaveControll);
             range.removeEventListener('touchstart', enterControll);
-            range.removeEventListener('touchout', leaveControll);
+            range.removeEventListener('touchend', leaveControll);
         };
     }, []);
     // angle between images.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-magic-card",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "image gallery component with framer motion",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/readme.md

@@ -15,27 +15,27 @@ npm install react-magic-card framer-motion
 ## Usage
 
 ```tsx
-import { MagicCircle } from "react-magic-card";
+import { MagicCircle } from 'react-magic-card'
 
 function MyComponent() {
   const images = [
     {
-      src: "/1.jpeg",
-      alt: "1image",
+      src: '/1.jpeg',
+      alt: '1image'
     },
     {
-      src: "/2.jpeg",
-      alt: "2image",
+      src: '/2.jpeg',
+      alt: '2image'
     },
     {
-      src: "/3.jpeg",
-      alt: "3image",
-    },
-  ];
+      src: '/3.jpeg',
+      alt: '3image'
+    }
+  ]
 
   return (
     <MagicCircle
-      data={images}
+      images={images}
       width={120}
       height={120}
       radius={100}
@@ -51,11 +51,11 @@ function MyComponent() {
         selectScale: 1.6,
         selectRotateX: 40,
         selectRotateY: 40,
-        selectRotateZ: -10,
+        selectRotateZ: -10
       }}
       transition={{ duration: 0.2 }}
     />
-  );
+  )
 }
 ```