Avatar Editor
Used to display user avatar editor on page.
Usage
import AvatarEditor from "@appserver/components/avatar-editor";
<AvatarEditor
visible={true}
onClose={() => {}}
onSave={() => {})}
onDeleteImage={() => {})}
onImageChange={() => {})}
onLoadFile={() => {}}
headerLabel="Edit Photo"
selectNewPhotoLabel="Select new photo"
orDropFileHereLabel="or drop file here"
saveButtonLabel="Save"
maxSizeFileError="Maximum file size exceeded"
unknownTypeError="Unknown image file type"
unknownError="Error"
displayType="auto"
/>
Properties
Props |
Type |
Required |
Values |
Default |
Description |
visible |
bool |
- |
- |
false |
Display avatar editor |
image |
string ,file |
- |
- |
- |
The URL of the image to use, or a File |
accept |
array |
- |
- |
['image/png', 'image/jpeg'] |
Accepted file types |
displayType |
oneOf |
- |
auto , modal , aside |
auto |
Display type |
selectNewPhotoLabel |
string |
- |
- |
Select new photo |
Translation string for file selection |
orDropFileHereLabel |
string |
- |
- |
or drop file here |
Translation string for file dropping (concat with selectNewPhotoLabel prop) |
headerLabel |
string |
- |
- |
Edit Photo |
Translation string for title |
saveButtonLabel |
string |
- |
- |
Save |
Translation string for save button |
saveButtonLoading |
bool |
- |
- |
- |
Tells when the button should show loader icon |
maxSizeFileError |
string |
- |
- |
Maximum file size exceeded |
Translation string for size warning |
unknownTypeError |
string |
- |
- |
Unknown image file type |
Translation string for file type warning |
unknownError |
string |
- |
- |
Error |
Translation string for warning |
maxSize |
number |
- |
- |
1 |
Max size of image |
onSave |
function |
- |
- |
- |
Save event |
onClose |
function |
- |
- |
- |
Closing event |
onDeleteImage |
function |
- |
- |
- |
Image deletion event |
onLoadFile |
function |
- |
- |
- |
Image upload event |
onImageChange |
function |
- |
- |
- |
Image change event |
className |
string |
- |
- |
- |
Accepts class |
id |
string |
- |
- |
- |
Accepts id |
style |
obj , array |
- |
- |
- |
Accepts css style |