react-magic-card 0.1.20 → 0.1.21
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.
package/README.md
CHANGED
|
@@ -73,6 +73,7 @@ function MyComponent() {
|
|
|
73
73
|
| delay | delay of the animation firing interval |
|
|
74
74
|
| offsetIndex | add an offset to the index of the components and images |
|
|
75
75
|
| reverseIndex | reverse index order the default true |
|
|
76
|
+
| loading | loading option of the eager or lazy the default auto |
|
|
76
77
|
| className | className of the component |
|
|
77
78
|
| classImages | className of the images |
|
|
78
79
|
| classImageSelect | className of the select image |
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { MagicCircleProps } from '../types';
|
|
3
|
-
export declare const MagicCircle: ({ images, height, width, dynamic, clockwise, radius, start, delay, controller, offsetIndex, reverseIndex, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, pickProperty, pickTransition }: MagicCircleProps) => React.JSX.Element;
|
|
3
|
+
export declare const MagicCircle: ({ images, height, width, dynamic, clockwise, radius, start, delay, controller, offsetIndex, reverseIndex, loading, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, pickProperty, pickTransition }: MagicCircleProps) => React.JSX.Element;
|
|
@@ -31,7 +31,7 @@ const react_1 = __importStar(require("react"));
|
|
|
31
31
|
const framer_motion_1 = require("framer-motion");
|
|
32
32
|
const styles_module_css_1 = __importDefault(require("./styles.module.css"));
|
|
33
33
|
const PickImage_1 = __importDefault(require("../common/PickImage"));
|
|
34
|
-
const MagicCircle = ({ images, height, width, dynamic = true, clockwise = true, radius, start, delay = 100, controller, offsetIndex = 0, reverseIndex = true, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, pickProperty, pickTransition }) => {
|
|
34
|
+
const MagicCircle = ({ images, height, width, dynamic = true, clockwise = true, radius, start, delay = 100, controller, offsetIndex = 0, reverseIndex = true, loading, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, pickProperty, pickTransition }) => {
|
|
35
35
|
const [count, setCount] = (0, react_1.useState)(0);
|
|
36
36
|
const [touchStartY, setTouchStartY] = (0, react_1.useState)(0);
|
|
37
37
|
const [touchStartX, setTouchStartX] = (0, react_1.useState)(0);
|
|
@@ -171,7 +171,7 @@ const MagicCircle = ({ images, height, width, dynamic = true, clockwise = true,
|
|
|
171
171
|
const zIndex = reverseIndex
|
|
172
172
|
? offsetIndex + images.length - 1 - index
|
|
173
173
|
: offsetIndex + index;
|
|
174
|
-
return (react_1.default.createElement(framer_motion_1.m.img, { key: zIndex, animate: {
|
|
174
|
+
return (react_1.default.createElement(framer_motion_1.m.img, { key: zIndex, loading: loading, animate: {
|
|
175
175
|
rotate: -count,
|
|
176
176
|
scale: hasSelect ? animate === null || animate === void 0 ? void 0 : animate.selectScale : animate === null || animate === void 0 ? void 0 : animate.scale,
|
|
177
177
|
rotateY: hasSelect
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { MagicStraightProps } from '../types';
|
|
3
|
-
export declare const MagicStraight: ({ images, height, width, vertical, margin, selectOffsetX, selectOffsetY, start, controller, delay, offsetIndex, reverseIndex, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, pickProperty, pickTransition }: MagicStraightProps) => React.JSX.Element;
|
|
3
|
+
export declare const MagicStraight: ({ images, height, width, vertical, margin, selectOffsetX, selectOffsetY, start, controller, delay, offsetIndex, reverseIndex, loading, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, pickProperty, pickTransition }: MagicStraightProps) => React.JSX.Element;
|
|
@@ -31,7 +31,7 @@ const react_1 = __importStar(require("react"));
|
|
|
31
31
|
const framer_motion_1 = require("framer-motion");
|
|
32
32
|
const styles_module_css_1 = __importDefault(require("./styles.module.css"));
|
|
33
33
|
const PickImage_1 = __importDefault(require("../common/PickImage"));
|
|
34
|
-
const MagicStraight = ({ images, height, width, vertical = true, margin = 0, selectOffsetX = 0, selectOffsetY = 0, start, controller, delay = 20, offsetIndex = 0, reverseIndex = true, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, pickProperty, pickTransition }) => {
|
|
34
|
+
const MagicStraight = ({ images, height, width, vertical = true, margin = 0, selectOffsetX = 0, selectOffsetY = 0, start, controller, delay = 20, offsetIndex = 0, reverseIndex = true, loading, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, pickProperty, pickTransition }) => {
|
|
35
35
|
const [touchStartY, setTouchStartY] = (0, react_1.useState)(0);
|
|
36
36
|
const [touchStartX, setTouchStartX] = (0, react_1.useState)(0);
|
|
37
37
|
const [hasShift, setHasShift] = (0, react_1.useState)(false);
|
|
@@ -188,7 +188,7 @@ const MagicStraight = ({ images, height, width, vertical = true, margin = 0, sel
|
|
|
188
188
|
const zIndex = reverseIndex
|
|
189
189
|
? offsetIndex + images.length - 1 - index
|
|
190
190
|
: offsetIndex + index;
|
|
191
|
-
return (react_1.default.createElement(framer_motion_1.m.img, { key: zIndex, animate: {
|
|
191
|
+
return (react_1.default.createElement(framer_motion_1.m.img, { key: zIndex, loading: loading, animate: {
|
|
192
192
|
y: hasSelect
|
|
193
193
|
? vertical
|
|
194
194
|
? (average - index) * height +
|
package/dist/types.d.ts
CHANGED