react-magic-card 2.0.4 → 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.
Files changed (2) hide show
  1. package/README.md +37 -39
  2. 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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-magic-card",
3
- "version": "2.0.4",
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
- "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
  }