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
| cropConfig | Object || specifies cropping dimensions and limits | refer to https://github.com/DominicTobias/react-image-crop#props|
52
52
| theme | Object or String |`dark`| Can be a simple string that specifies light or dark, or an object with your custom configurations |
53
53
54
-
##Props Explained
54
+
# Props Explained
55
55
56
+
### images(required)
57
+
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. Example:
59
+
60
+
```javascript
61
+
{
62
+
0: image1,
63
+
1: image2,
64
+
3, image3
65
+
}
66
+
```
67
+
68
+
### setImages(required)
69
+
70
+
A function for updating the images state. This can be easily acheived with react's useState hook.
71
+
72
+
```javascript
73
+
const [images, setImages] =useState({});
74
+
```
75
+
76
+
### max
77
+
78
+
This specifies the maximum number images you want this component to hold. It is set to `3` by default.
79
+
80
+
```jsx
81
+
<MultiImageInput
82
+
max={3}
83
+
images={setImages}
84
+
setImages={setImages}
85
+
cropConfig={{ crop }}
86
+
/>
87
+
```
88
+
89
+
### allowCrop
90
+
91
+
A boolean attribute for enabling/disabling cropping. It is `true` by default, set it to `false` if you don't want cropping.
92
+
93
+
### cropConfig
94
+
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
96
+
97
+
- crop
98
+
99
+
All crop params are initially optional.
100
+
101
+
\*_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._
102
+
103
+
```js
104
+
crop: {
105
+
unit:'px', // default, can be 'px' or '%'
106
+
x:130,
107
+
y:50,
108
+
width:200,
109
+
height:200
110
+
}
111
+
112
+
<MultiImageInput cropConfig={{crop}} />
56
113
```
57
114
115
+
If you want a fixed aspect you can either omit `width` and `height`:
116
+
117
+
```js
118
+
crop: {
119
+
aspect:16/9;
120
+
}
121
+
```
122
+
123
+
Or specify one or both of the dimensions:
124
+
125
+
```js
126
+
crop: {
127
+
aspect:16/9,
128
+
width:50,
129
+
}
130
+
```
131
+
132
+
If you specify just one of the dimensions, the other will be calculated for you.
133
+
134
+
```js
135
+
crop: {
136
+
unit:'%',
137
+
width:50,
138
+
height:50,
139
+
}
140
+
```
141
+
142
+
`unit` is optional and defaults to pixels `px`. It can also be percent `%`. In the above example we make a crop that is 50% of the rendered image size. Since the values are a percentage of the image, it will only be a square if the image is also a square.
143
+
144
+
- minWidth
145
+
146
+
A minimum crop width, in pixels. Default value is `300`
If true is passed then selection can't be disabled if the user clicks outside the selection area.
179
+
180
+
- disabled
181
+
182
+
If true then the user cannot resize or draw a new crop.
183
+
184
+
- locked
185
+
186
+
If true then the user cannot create or resize a crop, but can still drag the existing crop around.
187
+
188
+
- style
189
+
190
+
Inline styles object to be passed to the image wrapper element.
191
+
192
+
- imageStyle
193
+
194
+
Inline styles object to be passed to the image element.
195
+
196
+
- onImageError(event)
197
+
198
+
This event is called if the image had an error loading.
199
+
200
+
- onDragStart(event)
201
+
202
+
A callback which happens when a user starts dragging or resizing. It is convenient to manipulate elements outside this component.
203
+
204
+
- onDragEnd(event)
205
+
206
+
A callback which happens when a user releases the cursor or touch after dragging or resizing.
207
+
208
+
- crossorigin
209
+
210
+
Allows setting the crossorigin attribute on the image.
211
+
212
+
- renderSelectionAddon(state)
213
+
214
+
Render a custom element in crop selection.
215
+
216
+
- ruleOfThirds
217
+
218
+
Show [rule of thirds](https://en.wikipedia.org/wiki/Rule_of_thirds) lines in the cropped area. Defaults to `false`.
219
+
220
+
- circularCrop
221
+
222
+
Show the crop area as a circle. If your aspect is not 1 (a square) then the circle will be warped into an oval shape. Defaults to `false`.
223
+
224
+
### Theme
225
+
226
+
You can customize the look and feel of the component to suit your app better. This prop can either be a string that specifies `dark` or `light` theme or an object to customize various parts of the component. The value of this prop is `dark` by default. As a string you can simply have;
227
+
228
+
```js
229
+
<MultiImageInput theme="dark"/>
230
+
```
231
+
232
+
or
233
+
234
+
```js
235
+
<MultiImageInput theme="light"/>
236
+
```
237
+
238
+
An object value will have to take the following properties
239
+
240
+
- outlineColor
241
+
242
+
This will set the color of the borders and svg image icon
243
+
244
+
- background
245
+
246
+
This will set the background color of the component
247
+
248
+
- textColor
249
+
250
+
This sets the color of any text in the component
251
+
252
+
- buttonColor
253
+
254
+
This sets the color of any buttons in the component
0 commit comments