files-ui-main-logo
Files ui

Avatar API

API reference docs for the React Avatar component. Learn about the props and other APIs of this exported module.

Demo

Props

NameTypeDefaultDescription
readOnly
boolean
If true and if a src is given, then avatar will show the image and will not allow the user to change the picture. Also, layer on hover will not be shown
src
string
|
File
Image source in string format (URL) or File Object (Will be read as URL).
alt
string
Alternative label when an error occurs on loading the image
onChange
func
Callback fired when an image file is selected.
Signature:
(selectedFile: File) => void
accept
string
image/*
A comma-separated list of one or more file types, or unique file type specifiers, describing which file types to allow. The default implementation of accept checks the file's mime type or extension against this list. More information can be found here.
emptyLabel
React.ReactNode
Label to be displayed when image source is not set.
changeLabel
React.ReactNode
Label to be displayed when there is a valid source set.
loadingLabel
React.ReactNode
Label to be displayed when "isLoading" prop is set set. This will cover the current image.
isLoading
boolean
false
If true, loadingLabel will be shown.
onError
func
Callback fired when an error occured on loading the image.
smartImgFit
false
|
"orientation"
|
"center"
"center"
If false, image width will be set to 100%.
If present, image will be analized and displayed according to its heigh and width. Image with height greater than its width has a "portrait" orientation. Otherwise it has a "landscape" orientation. .
  • If value is "center", image will be centered and will not be displayed complete. This the empty space is avoided. This is achived by giving 100% to width prop if the orientation is "portrait". When orientation is "landscape", height prop will be set to 100%.
  • If value is "orientation", image will be displayed complete by giving 100% to width prop if the orientation is "landscape". When orientation is "portrait", height prop will be set to 100%. Some images will show an empty space.
style
React.CSSProperties
The in-line style object.