react-magic-card 0.0.7 → 0.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/MagicCircle/index.js +10 -7
  2. package/package.json +1 -1
  3. package/readme.md +12 -12
package/dist/MagicCircle/index.js CHANGED
@@ -80,9 +80,9 @@ const MagicCircle = ({ images, width, height, radius, controller, start, dynamic
80
80
  if (!range || !hasDelayed)
81
81
  return;
82
82
  // Add handle event when component mount and deps update.
83
- range.addEventListener('wheel', handleWheel);
84
- range.addEventListener('touchstart', handleTouchStart);
85
- range.addEventListener('touchmove', handleTouchMove);
83
+ range.addEventListener('wheel', handleWheel, { passive: true });
84
+ range.addEventListener('touchstart', handleTouchStart, { passive: true });
85
+ range.addEventListener('touchmove', handleTouchMove, { passive: true });
86
86
  // Clean up event and timeId when component is unmount.
87
87
  return () => {
88
88
  range.removeEventListener('wheel', handleWheel);
@@ -93,13 +93,14 @@ const MagicCircle = ({ images, width, height, radius, controller, start, dynamic
93
93
  }, [handleTouchMove, handleWheel, hasDelayed, wheelDelay]);
94
94
  // Functions of the controller.
95
95
  // entry ref area.
96
- const enterControll = (e) => {
97
- e.preventDefault();
96
+ const enterControll = () => {
98
97
  document.body.style.overflow = 'hidden';
98
+ document.body.style.overscrollBehavior = 'none';
99
99
  };
100
100
  // leave ref area.
101
101
  const leaveControll = () => {
102
102
  document.body.style.overflow = 'auto';
103
+ document.body.style.overscrollBehavior = 'auto';
103
104
  };
104
105
  // Added event when component is mounted.
105
106
  (0, react_1.useEffect)(() => {
@@ -107,15 +108,17 @@ const MagicCircle = ({ images, width, height, radius, controller, start, dynamic
107
108
  if (!range)
108
109
  return;
109
110
  // Add event.
110
- range.addEventListener('mouseover', enterControll, { passive: false });
111
+ range.addEventListener('mouseover', enterControll);
111
112
  range.addEventListener('mouseout', leaveControll);
112
- range.addEventListener('touchstart', enterControll, { passive: false });
113
+ range.addEventListener('touchstart', enterControll);
114
+ range.addEventListener('touchmove', enterControll);
113
115
  range.addEventListener('touchend', leaveControll);
114
116
  // Clean up event when component is unmount.
115
117
  return () => {
116
118
  range.removeEventListener('mouseover', enterControll);
117
119
  range.removeEventListener('mouseout', leaveControll);
118
120
  range.removeEventListener('touchstart', enterControll);
121
+ range.removeEventListener('touchmove', enterControll);
119
122
  range.removeEventListener('touchend', leaveControll);
120
123
  };
121
124
  }, []);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-magic-card",
3
- "version": "0.0.7",
3
+ "version": "0.0.9",
4
4
  "description": "image gallery component with framer motion",
5
5
  "main": "dist/index.js",
6
6
  "typings": "dist/index.d.ts",
package/readme.md CHANGED
@@ -15,27 +15,27 @@ npm install react-magic-card framer-motion
15
15
  ## Usage
16
16
 
17
17
  ```tsx
18
- import { MagicCircle } from "react-magic-card";
18
+ import { MagicCircle } from 'react-magic-card'
19
19
 
20
20
  function MyComponent() {
21
21
  const images = [
22
22
  {
23
- src: "/1.jpeg",
24
- alt: "1image",
23
+ src: '/1.jpeg',
24
+ alt: '1image'
25
25
  },
26
26
  {
27
- src: "/2.jpeg",
28
- alt: "2image",
27
+ src: '/2.jpeg',
28
+ alt: '2image'
29
29
  },
30
30
  {
31
- src: "/3.jpeg",
32
- alt: "3image",
33
- },
34
- ];
31
+ src: '/3.jpeg',
32
+ alt: '3image'
33
+ }
34
+ ]
35
35
 
36
36
  return (
37
37
  <MagicCircle
38
- data={images}
38
+ images={images}
39
39
  width={120}
40
40
  height={120}
41
41
  radius={100}
@@ -51,11 +51,11 @@ function MyComponent() {
51
51
  selectScale: 1.6,
52
52
  selectRotateX: 40,
53
53
  selectRotateY: 40,
54
- selectRotateZ: -10,
54
+ selectRotateZ: -10
55
55
  }}
56
56
  transition={{ duration: 0.2 }}
57
57
  />
58
- );
58
+ )
59
59
  }
60
60
  ```
61
61