react-magic-card 0.1.19 → 0.1.21

package/README.md

@@ -73,6 +73,7 @@ function MyComponent() {
 | delay            | delay of the animation firing interval                            |
 | offsetIndex      | add an offset to the index of the components and images           |
 | reverseIndex     | reverse index order the default true                              |
+| loading          | loading option of the eager or lazy the default auto              |
 | className        | className of the component                                        |
 | classImages      | className of the images                                           |
 | classImageSelect | className of the select image                                     |

package/dist/MagicCircle/index.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import type { MagicCircleProps } from '../types';
-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;
+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;

package/dist/MagicCircle/index.js

@@ -31,7 +31,7 @@ const react_1 = __importStar(require("react"));
 const framer_motion_1 = require("framer-motion");
 const styles_module_css_1 = __importDefault(require("./styles.module.css"));
 const PickImage_1 = __importDefault(require("../common/PickImage"));
-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 }) => {
+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 }) => {
     const [count, setCount] = (0, react_1.useState)(0);
     const [touchStartY, setTouchStartY] = (0, react_1.useState)(0);
     const [touchStartX, setTouchStartX] = (0, react_1.useState)(0);
@@ -171,7 +171,7 @@ const MagicCircle = ({ images, height, width, dynamic = true, clockwise = true,
                 const zIndex = reverseIndex
                     ? offsetIndex + images.length - 1 - index
                     : offsetIndex + index;
-                return (react_1.default.createElement(framer_motion_1.m.img, { key: zIndex, animate: {
+                return (react_1.default.createElement(framer_motion_1.m.img, { key: zIndex, loading: loading, animate: {
                         rotate: -count,
                         scale: hasSelect ? animate === null || animate === void 0 ? void 0 : animate.selectScale : animate === null || animate === void 0 ? void 0 : animate.scale,
                         rotateY: hasSelect

package/dist/MagicStraight/index.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import type { MagicStraightProps } from '../types';
-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;
+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;

package/dist/MagicStraight/index.js

@@ -31,7 +31,7 @@ const react_1 = __importStar(require("react"));
 const framer_motion_1 = require("framer-motion");
 const styles_module_css_1 = __importDefault(require("./styles.module.css"));
 const PickImage_1 = __importDefault(require("../common/PickImage"));
-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 }) => {
+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 }) => {
     const [touchStartY, setTouchStartY] = (0, react_1.useState)(0);
     const [touchStartX, setTouchStartX] = (0, react_1.useState)(0);
     const [hasShift, setHasShift] = (0, react_1.useState)(false);
@@ -177,21 +177,18 @@ const MagicStraight = ({ images, height, width, vertical = true, margin = 0, sel
         react_1.default.createElement("div", { ref: div1Ref, tabIndex: offsetIndex <= 0 ? 0 : offsetIndex - 1, onKeyDown: handleKeyPress, className: className + ' ' + styles_module_css_1.default.outer, style: {
                 zIndex: offsetIndex - 1,
                 width: !vertical
-                    ? images.length * (width + margin * 2) + 'px'
-                    : 'fit-content',
+                    ? images.length * (width + margin * 2) + controller + 'px'
+                    : width + controller,
                 height: vertical
-                    ? images.length * (height + margin * 2) + 'px'
-                    : 'fit-content',
-                padding: vertical
-                    ? controller + 'px ' + controller / 2 + 'px'
-                    : controller / 2 + 'px ' + controller + 'px',
+                    ? images.length * (height + margin * 2) + controller + 'px'
+                    : height + controller,
                 flexDirection: vertical ? 'column' : 'row'
             } }, images.map((image, index) => {
             const hasSelect = images[select] == images[index];
             const zIndex = reverseIndex
                 ? offsetIndex + images.length - 1 - index
                 : offsetIndex + index;
-            return (react_1.default.createElement(framer_motion_1.m.img, { key: zIndex, animate: {
+            return (react_1.default.createElement(framer_motion_1.m.img, { key: zIndex, loading: loading, animate: {
                     y: hasSelect
                         ? vertical
                             ? (average - index) * height +

package/dist/types.d.ts

@@ -47,6 +47,7 @@ type MagicProperty = {
     delay: number;
     offsetIndex?: number;
     reverseIndex?: boolean;
+    loading?: 'eager' | 'lazy';
     className?: string;
     classImages?: string;
     classImageSelect?: string;

package/package.json

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