DocSpace-buildtools/packages/components/avatar-editor

Avatar Editor

Used to display user avatar editor on page.

Usage

import AvatarEditor from "@docspace/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