react-magic-card 2.0.3 → 2.0.5
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
|
@@ -1,8 +1,10 @@
|
|
|
1
|
+
# react-magic-card
|
|
2
|
+
|
|
1
3
|
[](https://github.com/su-pull/react-magic-card/releases/latest)
|
|
2
4
|
[](https://bundlephobia.com/package/react-magic-card)
|
|
3
5
|
[](https://opensource.org/licenses/MIT)
|
|
4
6
|
|
|
5
|
-
This is the framer motion
|
|
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 {
|
|
18
|
+
import { MagicCircle } from 'react-magic-card'
|
|
17
19
|
|
|
18
20
|
function MyComponent() {
|
|
19
21
|
const images = [
|
|
20
22
|
{
|
|
21
|
-
src: '/
|
|
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
|
-
<
|
|
29
|
+
<MagicCircle
|
|
36
30
|
images={images}
|
|
37
31
|
width={100}
|
|
38
32
|
height={100}
|
|
33
|
+
radius={100}
|
|
39
34
|
controller={100}
|
|
40
|
-
start={
|
|
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
|
-
|
|
|
65
|
-
|
|
|
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
|
-
##
|
|
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
|
-
##
|
|
74
|
+
## MagicStraight Properties
|
|
77
75
|
|
|
78
|
-
| Property
|
|
79
|
-
|
|
|
80
|
-
| vertical
|
|
81
|
-
| margin
|
|
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
|
|
|
@@ -97,18 +97,18 @@ function MyComponent() {
|
|
|
97
97
|
|
|
98
98
|
## Transition Object
|
|
99
99
|
|
|
100
|
-
It is Inherits framer motion transition object
|
|
100
|
+
It is Inherits framer motion transition object other than intera.
|
|
101
101
|
|
|
102
|
-
##
|
|
102
|
+
## PickProperty Object
|
|
103
103
|
|
|
104
|
-
| Property
|
|
105
|
-
|
|
|
106
|
-
|
|
|
107
|
-
| white
|
|
108
|
-
| alpha
|
|
109
|
-
| blur
|
|
110
|
-
| scale
|
|
111
|
-
| offset
|
|
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 |
|
|
112
112
|
|
|
113
113
|
## License
|
|
114
114
|
|
|
@@ -335,9 +335,9 @@ const CircleRotation = ({ images, start, height, width, radius, controller, offs
|
|
|
335
335
|
? `filter ${initialFadeTime}s ease-in-out`
|
|
336
336
|
: ''
|
|
337
337
|
} }));
|
|
338
|
-
}))),
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
338
|
+
})))),
|
|
339
|
+
react_1.default.createElement(DetailImage_1.DetailImage, { detailRef: refDetail, detailKey: select, hasDetail: hasDetail, onClick: () => {
|
|
340
|
+
setHasDetail(false);
|
|
341
|
+
}, classDetail: detailProperty === null || detailProperty === void 0 ? void 0 : detailProperty.classDetail, src: images[select].src, alt: images[select].alt, width: width, height: height, white: detailProperty === null || detailProperty === void 0 ? void 0 : detailProperty.white, alpha: detailProperty === null || detailProperty === void 0 ? void 0 : detailProperty.alpha, blur: detailProperty === null || detailProperty === void 0 ? void 0 : detailProperty.blur, scale: detailProperty === null || detailProperty === void 0 ? void 0 : detailProperty.scale, rotate: detailProperty === null || detailProperty === void 0 ? void 0 : detailProperty.rotate, transition: detailTransition, zIndex: frontImage })));
|
|
342
342
|
};
|
|
343
343
|
exports.CircleRotation = CircleRotation;
|
|
@@ -279,7 +279,7 @@ const StraightInfinity = ({ images, start, height, width, vertical = false, marg
|
|
|
279
279
|
x: !vertical ? count + offsetWide : 0,
|
|
280
280
|
y: vertical ? count + offsetHeight : 0
|
|
281
281
|
}, transition: transition }, images.map((image, index) => {
|
|
282
|
-
const hasSelect = images[select]
|
|
282
|
+
const hasSelect = images[select] === images[index];
|
|
283
283
|
const hasEdge = () => {
|
|
284
284
|
for (let i = edge; i <= images.length - 1; i++) {
|
|
285
285
|
if (images[i] === images[index]) {
|
|
@@ -323,7 +323,7 @@ const StraightInfinity = ({ images, start, height, width, vertical = false, marg
|
|
|
323
323
|
: animate === null || animate === void 0 ? void 0 : animate.opacity
|
|
324
324
|
}, initial: {
|
|
325
325
|
scale: hasSelect ? initial === null || initial === void 0 ? void 0 : initial.selectScale : initial === null || initial === void 0 ? void 0 : initial.scale,
|
|
326
|
-
rotate: hasSelect ?
|
|
326
|
+
rotate: hasSelect ? initial === null || initial === void 0 ? void 0 : initial.selectRotate : initial === null || initial === void 0 ? void 0 : initial.rotate,
|
|
327
327
|
rotateY: hasSelect
|
|
328
328
|
? initial === null || initial === void 0 ? void 0 : initial.selectRotateY
|
|
329
329
|
: initial === null || initial === void 0 ? void 0 : initial.rotateY,
|
|
@@ -360,9 +360,9 @@ const StraightInfinity = ({ images, start, height, width, vertical = false, marg
|
|
|
360
360
|
? `filter ${initialFadeTime}s ease-in-out`
|
|
361
361
|
: ''
|
|
362
362
|
} }));
|
|
363
|
-
})),
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
363
|
+
}))),
|
|
364
|
+
react_1.default.createElement(DetailImage_1.DetailImage, { detailRef: refDetail, detailKey: select, hasDetail: hasDetail, onClick: () => {
|
|
365
|
+
setHasDetail(false);
|
|
366
|
+
}, classDetail: detailProperty === null || detailProperty === void 0 ? void 0 : detailProperty.classDetail, src: images[select].src, alt: images[select].alt, width: width, height: height, white: detailProperty === null || detailProperty === void 0 ? void 0 : detailProperty.white, alpha: detailProperty === null || detailProperty === void 0 ? void 0 : detailProperty.alpha, blur: detailProperty === null || detailProperty === void 0 ? void 0 : detailProperty.blur, scale: detailProperty === null || detailProperty === void 0 ? void 0 : detailProperty.scale, rotate: detailProperty === null || detailProperty === void 0 ? void 0 : detailProperty.rotate, transition: detailTransition, zIndex: frontImage })));
|
|
367
367
|
};
|
|
368
368
|
exports.StraightInfinity = StraightInfinity;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { DetailImageProps } from '../../types';
|
|
3
|
-
export declare const DetailImage: ({ onClick, classDetail, hasDetail, detailRef, detailKey, src, alt, width, height, zIndex, white, alpha, blur, scale, transition }: DetailImageProps) => React.JSX.Element;
|
|
3
|
+
export declare const DetailImage: ({ onClick, classDetail, hasDetail, detailRef, detailKey, src, alt, width, height, zIndex, white, alpha, blur, scale, rotate, transition }: DetailImageProps) => React.JSX.Element;
|
|
@@ -7,7 +7,7 @@ exports.DetailImage = void 0;
|
|
|
7
7
|
const react_1 = __importDefault(require("react"));
|
|
8
8
|
const framer_motion_1 = require("framer-motion");
|
|
9
9
|
const styles_module_css_1 = __importDefault(require("./styles.module.css"));
|
|
10
|
-
const DetailImage = ({ onClick, classDetail, hasDetail, detailRef, detailKey, src, alt, width, height, zIndex, white = true, alpha = 0.3, blur = 3, scale = 2.5, transition }) => {
|
|
10
|
+
const DetailImage = ({ onClick, classDetail, hasDetail, detailRef, detailKey, src, alt, width, height, zIndex, white = true, alpha = 0.3, blur = 3, scale = 2.5, rotate = 0, transition }) => {
|
|
11
11
|
const backdropFilter = hasDetail ? `blur(${blur}px)` : undefined;
|
|
12
12
|
const background = hasDetail
|
|
13
13
|
? white
|
|
@@ -23,7 +23,7 @@ const DetailImage = ({ onClick, classDetail, hasDetail, detailRef, detailKey, sr
|
|
|
23
23
|
zIndex: zIndex + 1,
|
|
24
24
|
scale: scale,
|
|
25
25
|
opacity: hasDetail ? 1 : 0,
|
|
26
|
-
|
|
26
|
+
rotate: rotate
|
|
27
27
|
}, initial: { scale: 1, opacity: 0 }, transition: transition })));
|
|
28
28
|
};
|
|
29
29
|
exports.DetailImage = DetailImage;
|
package/dist/types.d.ts
CHANGED
|
@@ -35,7 +35,7 @@ type DetailProperty = {
|
|
|
35
35
|
alpha?: number;
|
|
36
36
|
blur?: number;
|
|
37
37
|
scale?: number;
|
|
38
|
-
|
|
38
|
+
rotate?: number;
|
|
39
39
|
};
|
|
40
40
|
type CommonProperty = {
|
|
41
41
|
images: ImageProperty[];
|
|
@@ -91,6 +91,7 @@ export type DetailImageProps = {
|
|
|
91
91
|
alpha?: number;
|
|
92
92
|
blur?: number;
|
|
93
93
|
scale?: number;
|
|
94
|
+
rotate?: number;
|
|
94
95
|
transition?: TransitionProperty;
|
|
95
96
|
};
|
|
96
97
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-magic-card",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.5",
|
|
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
|
-
"
|
|
32
|
-
"framer-motion": "^
|
|
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
|
}
|