You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
A library for adding a simple multiple image upload and cropping feature to your react app.
8
-
9
7
Requires react >= 16.8.0
10
8
11
9
This package makes use of [react-image-cropper](https://github.com/DominicTobias/react-image-crop)
12
10
13
11
## Installation
14
12
15
13
Run the following command:
16
-
`npm install react-multiple-image-upload`
14
+
`npm install react-multiple-image-input`
17
15
18
16
## Usage
19
17
@@ -32,7 +30,7 @@ function App() {
32
30
33
31
return (
34
32
<MultiImageInput
35
-
images={setImages}
33
+
images={images}
36
34
setImages={setImages}
37
35
cropConfig={{ crop, ruleOfThirds:true }}
38
36
/>
@@ -55,9 +53,9 @@ export default App;
55
53
56
54
# Props Explained
57
55
58
-
### images(required)
56
+
### images(required)(_object_)
59
57
60
-
This is an object that houses the Base64 URLs to all the selected images. Each image has a key that starts from index `0` and is incremental as more images are added. It should be a state variable so that `react-multiple-image-input` can update. Example:
58
+
This is an object that houses the Base64 URLs to all the selected images. Each image has a key that starts from index `0` and is incremental as more images are added. It should be a state variable so that `react-multiple-image-input` can update it. Example:
61
59
62
60
```javascript
63
61
{
@@ -67,17 +65,17 @@ This is an object that houses the Base64 URLs to all the selected images. Each i
67
65
}
68
66
```
69
67
70
-
### setImages(required)
68
+
### setImages(required)(_function_)
71
69
72
70
A function for updating the images state. This can be easily acheived with react's useState hook.
73
71
74
72
```javascript
75
73
const [images, setImages] =useState({});
76
74
```
77
75
78
-
### max
76
+
### max(optional)(_number_)
79
77
80
-
This specifies the maximum number images you want this component to hold. It is set to `3` by default.
78
+
This specifies the maximum number of images you want this component to hold. It is set to `3` by default.
81
79
82
80
```jsx
83
81
<MultiImageInput
@@ -88,19 +86,19 @@ This specifies the maximum number images you want this component to hold. It is
88
86
/>
89
87
```
90
88
91
-
### allowCrop
89
+
### allowCrop(optional)(_boolean_)
92
90
93
91
A boolean attribute for enabling/disabling cropping. It is `true` by default, set it to `false` if you don't want cropping.
94
92
95
-
### cropConfig
93
+
### cropConfig(optional)(_object_)
96
94
97
95
This sets the dimensions for cropping. You can pass in dimension props accepted by [react-image-cropper](https://github.com/DominicTobias/react-image-crop) into this object. A list of these props include
98
96
99
97
- crop
100
98
101
99
All crop params are initially optional.
102
100
103
-
\*_While you can initially omit the crop object, any subsequent change will need to be saved to state in the `onChange`and passed into the component._
101
+
\*_While you can initially omit the crop object, any subsequent change will need to be saved and passed into the component._
0 commit comments