react-magic-card 2.0.4 → 2.0.6

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 (4) hide show
  1. package/README.md +37 -39
  2. package/dist/CircleRotation/index.js +17 -4
  3. package/dist/StraightInfinity/index.js +37 -4
  4. package/package.json +5 -18
package/README.md CHANGED
@@ -1,8 +1,10 @@
1
+ # react-magic-card
2
+
1
3
  [![Release Status](https://img.shields.io/github/release/su-pull/react-magic-card.svg)](https://github.com/su-pull/react-magic-card/releases/latest)
2
4
  [![Minzip Size](https://img.shields.io/bundlephobia/minzip/react-magic-card)](https://bundlephobia.com/package/react-magic-card)
3
5
  [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
4
6
 
5
- This is the framer motion animation components, that support images gallery.
7
+ This is the framer motion components, that support images gallery.
6
8
 
7
9
  ## Installation
8
10
 
@@ -13,31 +15,25 @@ npm install react-magic-card framer-motion
13
15
  ## Usage Guide
14
16
 
15
17
  ```tsx
16
- import { StraightInfinity } from 'react-magic-card'
18
+ import { MagicCircle } from 'react-magic-card'
17
19
 
18
20
  function MyComponent() {
19
21
  const images = [
20
22
  {
21
- src: '/cat.jpeg',
22
- alt: 'alt'
23
- },
24
- {
25
- src: '/dog.jpeg',
26
- alt: 'alt'
27
- },
28
- {
29
- src: '/bird.jpeg',
23
+ src: '/src.jpeg',
30
24
  alt: 'alt'
31
25
  }
32
26
  ]
33
27
 
34
28
  return (
35
- <StraightInfinity
29
+ <MagicCircle
36
30
  images={images}
37
31
  width={100}
38
32
  height={100}
33
+ radius={100}
39
34
  controller={100}
40
- start={Math.ceil(images.length / 2 - 1)}
35
+ start={1}
36
+ delay={100}
41
37
  />
42
38
  )
43
39
  }
@@ -52,8 +48,12 @@ function MyComponent() {
52
48
  | width (required) | width of the single image |
53
49
  | height (required) | height of the single image |
54
50
  | controller (required) | controller size is add to the size of the component |
51
+ | delay | delay of the animation firing interval |
55
52
  | offsetIndex | add an offset to the index of the components and images |
56
53
  | reverseIndex | order the change the overlap of zindex default true |
54
+ | loading | loading attribute of img element in html |
55
+ | initialFadeRange | range of fade animation after page loaded |
56
+ | initialTransTime | transition time of fade animation after page loaded |
57
57
  | className | className of the component |
58
58
  | classImages | className of the images |
59
59
  | classImageSelect | className of the select image |
@@ -61,24 +61,24 @@ function MyComponent() {
61
61
  | animate | object in the animation property |
62
62
  | initial | object in the animation property |
63
63
  | transition | object in the transition property |
64
- | detailTransition | object in the transition property |
65
- | detailProperty | object in the detail property |
66
- | loading | loading attribute of img element in html |
67
- | initialFadeRange | range of fade animation after page loaded |
68
- | initialTransTime | transition time of fade animation after page loaded |
64
+ | pickTransition | object in the transition property |
65
+ | pickProperty | object in the pick property |
69
66
 
70
- ## CircleRotation Properties
67
+ ## MagicCircle Properties
71
68
 
72
- | Property | Meaning |
73
- | ----------------- | -------------------- |
74
- | radius (required) | radius of the circle |
69
+ | Property | Meaning |
70
+ | ----------------- | ----------------------------------------------- |
71
+ | radius (required) | radius of the circle |
72
+ | dynamic | dynamic or static for rotation the default true |
75
73
 
76
- ## StraightInfinity Properties
74
+ ## MagicStraight Properties
77
75
 
78
- | Property | Meaning |
79
- | -------- | --------------------------------------- |
80
- | vertical | vertical or horizontal the default true |
81
- | margin | spacing of the between images |
76
+ | Property | Meaning |
77
+ | ------------- | --------------------------------------- |
78
+ | vertical | vertical or horizontal the default true |
79
+ | margin | spacing of the between images |
80
+ | selectOffsetX | X-axis position |
81
+ | selectOffsetY | Y-axis position |
82
82
 
83
83
  ## Animation Object
84
84
 
@@ -86,31 +86,29 @@ function MyComponent() {
86
86
  | ------------- | ------------------------------------- |
87
87
  | scale | scaling of the images |
88
88
  | opacity | opacity or transparency of the images |
89
- | rotate | rotation of the images |
90
89
  | rotateX | X-axis rotation of the images |
91
90
  | rotateY | Y-axis rotation of the images |
92
91
  | rotateZ | Z-axis rotation of the images |
93
92
  | selectScale | scaling of the selected image |
94
93
  | selectOpacity | opacity of the selected image |
95
- | selectRotate | rotation of the selected image |
96
94
  | selectRotateX | X-axis rotation of the selected image |
97
95
  | selectRotateY | Y-axis rotation of the selected image |
98
96
  | selectRotateZ | Z-axis rotation of the selected image |
99
97
 
100
98
  ## Transition Object
101
99
 
102
- It is Inherits framer motion transition object ease and (type: 'spring').
100
+ It is Inherits framer motion transition object other than intera.
103
101
 
104
- ## detailProperty Object
102
+ ## PickProperty Object
105
103
 
106
- | Property | Meaning |
107
- | ----------- | ----------------------------------------------------- |
108
- | classDetail | className of the detail image |
109
- | white | white or black for background the default true |
110
- | alpha | background transparency of a number between 0 ~ 1 |
111
- | blur | blur intensity of a number between 1 ~ 20 a preferred |
112
- | scale | scale of the detail image |
113
- | rotate | rotation of the images |
104
+ | Property | Meaning |
105
+ | --------- | --------------------------------------------------------- |
106
+ | classPick | className of the pick image |
107
+ | white | white or black for background the default true |
108
+ | alpha | background transparency of a number between 0 ~ 1 |
109
+ | blur | blur intensity of a number between 1 ~ 20 a preferred |
110
+ | scale | scale of the pick image |
111
+ | offset | offset of an appearance position from the center position |
114
112
 
115
113
  ## License
116
114
 
package/dist/CircleRotation/index.js CHANGED
@@ -45,6 +45,8 @@ const CircleRotation = ({ images, start, height, width, radius, controller, offs
45
45
  const [hasDelayed, setHasDelayed] = (0, react_1.useState)(true);
46
46
  const [select, setSelect] = (0, react_1.useState)(start);
47
47
  const [hasDetail, setHasDetail] = (0, react_1.useState)(false);
48
+ const [lastMoveTime, setLastMoveTime] = (0, react_1.useState)(Date.now());
49
+ const moveDelay = 140;
48
50
  const refOuter = (0, react_1.useRef)(null);
49
51
  const refDetail = (0, react_1.useRef)(null);
50
52
  const centralAngle = ((2 * Math.PI) / images.length) * (180 / Math.PI);
@@ -54,21 +56,26 @@ const CircleRotation = ({ images, start, height, width, radius, controller, offs
54
56
  setSelect(select == 0 ? images.length - 1 : select - 1);
55
57
  setHasDelayed(false);
56
58
  setCount(count + centralAngle);
59
+ setLastMoveTime(Date.now());
57
60
  }, [centralAngle, count, images.length, select]);
58
61
  // turn right
59
62
  const shiftRight = (0, react_1.useCallback)(() => {
60
63
  setSelect(select == images.length - 1 ? 0 : select + 1);
61
64
  setHasDelayed(false);
62
65
  setCount(count - centralAngle);
66
+ setLastMoveTime(Date.now());
63
67
  }, [centralAngle, count, images.length, select]);
64
68
  // Function of the desktop.
65
69
  const handleScroll = (0, react_1.useCallback)((e) => {
70
+ const currentTime = Date.now();
71
+ if (currentTime - lastMoveTime < moveDelay)
72
+ return;
66
73
  const delta = e.deltaY;
67
74
  if (delta < 0)
68
75
  shiftLeft();
69
76
  if (delta > 0)
70
77
  shiftRight();
71
- }, [shiftLeft, shiftRight]);
78
+ }, [lastMoveTime, shiftLeft, shiftRight]);
72
79
  // Get a start y and x position in touchStart Y and X.
73
80
  const handleTouchStart = (e) => {
74
81
  const touch = e.touches[0];
@@ -77,6 +84,9 @@ const CircleRotation = ({ images, start, height, width, radius, controller, offs
77
84
  };
78
85
  // Function of the mobile.
79
86
  const handleTouchMove = (0, react_1.useCallback)((event) => {
87
+ const currentTime = Date.now();
88
+ if (currentTime - lastMoveTime < moveDelay)
89
+ return;
80
90
  const touch = event.touches[0];
81
91
  const outer = refOuter.current;
82
92
  const outerHalfWidth = outer.clientWidth / 2;
@@ -116,7 +126,8 @@ const CircleRotation = ({ images, start, height, width, radius, controller, offs
116
126
  }
117
127
  setTouchStartX(deltaX);
118
128
  setTouchStartY(deltaY);
119
- }, [shiftLeft, shiftRight, touchStartX, touchStartY]);
129
+ setLastMoveTime(Date.now());
130
+ }, [shiftLeft, shiftRight, touchStartX, touchStartY, lastMoveTime]);
120
131
  const handleMouseDown = (0, react_1.useCallback)((e) => {
121
132
  if (hasDetail)
122
133
  return;
@@ -125,7 +136,8 @@ const CircleRotation = ({ images, start, height, width, radius, controller, offs
125
136
  setInitialY(e.clientY);
126
137
  }, [hasDetail]);
127
138
  const handleMouseMove = (0, react_1.useCallback)((e) => {
128
- if (isDragging) {
139
+ const currentTime = Date.now();
140
+ if (isDragging && currentTime - lastMoveTime >= moveDelay) {
129
141
  const outer = refOuter.current;
130
142
  const outerHalfWidth = outer.clientWidth / 2;
131
143
  const outerHalfHeight = outer.clientHeight / 2;
@@ -165,8 +177,9 @@ const CircleRotation = ({ images, start, height, width, radius, controller, offs
165
177
  setInitialX(e.clientX);
166
178
  setInitialY(e.clientY);
167
179
  setHasMove(true);
180
+ setLastMoveTime(Date.now());
168
181
  }
169
- }, [initialX, initialY, isDragging, shiftLeft, shiftRight]);
182
+ }, [initialX, initialY, isDragging, shiftLeft, shiftRight, lastMoveTime]);
170
183
  const handleMouseUp = (0, react_1.useCallback)(() => {
171
184
  setIsDragging(false);
172
185
  setHasMove(false);
package/dist/StraightInfinity/index.js CHANGED
@@ -58,6 +58,9 @@ const StraightInfinity = ({ images, start, height, width, vertical = false, marg
58
58
  const refOuter = (0, react_1.useRef)(null);
59
59
  const refDetail = (0, react_1.useRef)(null);
60
60
  const [count, setCount] = (0, react_1.useState)(0);
61
+ // Adding variables for speed limiting
62
+ const [lastMoveTime, setLastMoveTime] = (0, react_1.useState)(Date.now());
63
+ const moveDelay = 140; // Minimum delay between moves in milliseconds.
61
64
  // Functions of the swipe and wheel a shifting.
62
65
  // turn left
63
66
  const shiftLeft = (0, react_1.useCallback)(() => __awaiter(void 0, void 0, void 0, function* () {
@@ -79,12 +82,16 @@ const StraightInfinity = ({ images, start, height, width, vertical = false, marg
79
82
  }), [count, images.length, margin, select, edge, width]);
80
83
  // Wheel function of the desktop.
81
84
  const handleScroll = (0, react_1.useCallback)((e) => __awaiter(void 0, void 0, void 0, function* () {
85
+ const now = Date.now();
86
+ if (now - lastMoveTime < moveDelay)
87
+ return;
88
+ setLastMoveTime(now);
82
89
  const delta = e.deltaY;
83
90
  if (delta < 0)
84
91
  shiftLeft();
85
92
  if (delta > 0)
86
93
  shiftRight();
87
- }), [shiftLeft, shiftRight]);
94
+ }), [shiftLeft, shiftRight, lastMoveTime, moveDelay]);
88
95
  // Get a start y and x position in touchStart Y and X.
89
96
  const handleTouchStart = (e) => {
90
97
  const touch = e.touches[0];
@@ -93,6 +100,10 @@ const StraightInfinity = ({ images, start, height, width, vertical = false, marg
93
100
  };
94
101
  // Swipe Function of the mobile.
95
102
  const handleTouchMove = (0, react_1.useCallback)((e) => {
103
+ const now = Date.now();
104
+ if (now - lastMoveTime < moveDelay)
105
+ return;
106
+ setLastMoveTime(now);
96
107
  const touch = e.touches[0];
97
108
  const delta = hasDetail
98
109
  ? touch.clientX
@@ -116,7 +127,16 @@ const StraightInfinity = ({ images, start, height, width, vertical = false, marg
116
127
  : !vertical
117
128
  ? setTouchStartX(delta)
118
129
  : setTouchStartY(delta);
119
- }, [hasDetail, shiftLeft, shiftRight, touchStartX, touchStartY, vertical]);
130
+ }, [
131
+ hasDetail,
132
+ shiftLeft,
133
+ shiftRight,
134
+ touchStartX,
135
+ touchStartY,
136
+ vertical,
137
+ lastMoveTime,
138
+ moveDelay
139
+ ]);
120
140
  const handleMouseDown = (0, react_1.useCallback)((e) => {
121
141
  setIsDragging(true);
122
142
  setInitialX(e.clientX);
@@ -124,6 +144,10 @@ const StraightInfinity = ({ images, start, height, width, vertical = false, marg
124
144
  }, []);
125
145
  const handleMouseMove = (0, react_1.useCallback)((e) => {
126
146
  if (isDragging) {
147
+ const now = Date.now();
148
+ if (now - lastMoveTime < moveDelay)
149
+ return;
150
+ setLastMoveTime(now);
127
151
  const deltaX = e.clientX - initialX;
128
152
  const deltaY = e.clientY - initialY;
129
153
  if (!vertical ? deltaX < 0 : deltaY < 0)
@@ -133,7 +157,16 @@ const StraightInfinity = ({ images, start, height, width, vertical = false, marg
133
157
  !vertical ? setInitialX(e.clientX) : setInitialY(e.clientY);
134
158
  setHasMove(true);
135
159
  }
136
- }, [initialX, initialY, isDragging, shiftLeft, shiftRight, vertical]);
160
+ }, [
161
+ initialX,
162
+ initialY,
163
+ isDragging,
164
+ shiftLeft,
165
+ shiftRight,
166
+ vertical,
167
+ lastMoveTime,
168
+ moveDelay
169
+ ]);
137
170
  const handleMouseUp = (0, react_1.useCallback)(() => {
138
171
  setIsDragging(false);
139
172
  setHasMove(false);
@@ -144,7 +177,7 @@ const StraightInfinity = ({ images, start, height, width, vertical = false, marg
144
177
  const detail = refDetail.current;
145
178
  const timeId = setTimeout(() => {
146
179
  setHasDelayed(true);
147
- }, ((transition === null || transition === void 0 ? void 0 : transition.duration) / 2) * 1000);
180
+ }, (transition === null || transition === void 0 ? void 0 : transition.duration) * 1000);
148
181
  // Add handle event when component mount and deps update.
149
182
  document.addEventListener('mouseup', handleMouseUp);
150
183
  if (!hasDelayed)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-magic-card",
3
- "version": "2.0.4",
3
+ "version": "2.0.6",
4
4
  "description": "React Component library for images gallery using the framer motion animation.",
5
5
  "main": "dist/index.js",
6
6
  "typings": "dist/index.d.ts",
@@ -9,32 +9,19 @@
9
9
  "url": "https://github.com/su-pull/react-magic-card",
10
10
  "directory": "react-magic-card/src"
11
11
  },
12
- "scripts": {
13
- "tsc": "./node_modules/.bin/tsc",
14
- "compile": "tsc && npm run copy-css",
15
- "copy-css": "npm run copy-css1 && npm run copy-css2 && npm run copy-css3",
16
- "copy-css1": "cp src/MagicCircle/styles.module.css dist/MagicCircle/styles.module.css",
17
- "copy-css2": "cp src/MagicStraight/styles.module.css dist/MagicStraight/styles.module.css",
18
- "copy-css3": "cp src/common/PickImage/styles.module.css dist/common/PickImage/styles.module.css",
19
- "test": "test"
20
- },
21
12
  "keywords": [
22
13
  "react",
23
14
  "component",
24
15
  "animation",
25
16
  "images",
26
- "gallery",
27
- "circle",
28
- "infinity"
17
+ "gallery"
29
18
  ],
30
19
  "license": "MIT",
31
- "dependencies": {
32
- "framer-motion": "^10.12.16",
33
- "react": "^18.2.0",
34
- "react-dom": "^18.2.0",
35
- "typescript": "^5.1.3"
20
+ "peerDependencies": {
21
+ "framer-motion": "^11.3.21"
36
22
  },
37
23
  "devDependencies": {
24
+ "typescript": "^5.1.3",
38
25
  "@types/react": "^18.2.12",
39
26
  "@types/css-modules": "^1.0.2"
40
27
  }