Avatar

This "avatar" component can be used to just display an image or even can be a special file input designed for setting an imageby picking file from a file dialog.

Basic Avatar (read only)

The most basic use is to set a fixed image from Url.

<Avatar
  readOnly
  src={"https://i.pinimg.com/564x/9a/8b/cf/9a8bcfaba81783eff9241538b00343b1.jpg"}
  alt="Isabella"
/>

Picking an image File

The <Avatar/> component supports both a

string

url and a

File

object as the source.

<Avatar src={imageSource} alt="Avatar" onChange={handleChangeSource} />

Fallback (error on load the image)

If there is an error loading the avatar image, the <Avatar/> component provides a way to fall back by defining the

onError

prop. This could happen if:

The image url is broken, or
The image file selected is not an image

Agregar foto

<Avatar
  src={imageSource}
  readOnly
  onError={() => setImageSource(fallBackImage)}
  alt="Avatar"
/>
<Avatar
  src={imageSource2}
  onError={() => setImageSource2(fallBackImage)}
  onChange={(imgSource) => setImageSource2(imgSource)}
  accept=".pdf, .png"
  alt="Avatar2"
/>

Smart image fit

Avatar with

smartImgFit

prop will display image according to its heigh and width.
Image with height greater than its width has a "portrait" orientation. Otherwise it has a "landscape" orientation.
In Avatar component the default value is "center".

<Avatar src={landscapeImage} readOnly smartImgFit={false} />
<Avatar src={landscapeImage} readOnly smartImgFit={"orientation"} />
<Avatar src={landscapeImage} readOnly smartImgFit={"center"} />
 
<Avatar src={portraitImage} readOnly smartImgFit={false} />
<Avatar src={portraitImage} readOnly smartImgFit={"orientation"} />
<Avatar src={portraitImage} readOnly smartImgFit={"center"} />

Loading

You can use the prop

isLoading

when you want to communicate that something is loading.

<Avatar readOnly src={imageSrc} alt="Isabella" isLoading={true} />

Variants

Avatar component comes in 2 variants: "circle" and "square".

<Avatar src={imageSrc} readOnly />
<Avatar src={imageSrc} variant="circle" readOnly />

Styling

You can define the

style

prop for changing the styles applied to the main container such us the

width

o the

height

.
Also you can use directly the prop

borderRadius

to specify how rounde you preffer the borders.

<Avatar
  readOnly
  src={imgSrc}
  alt="Isabella"
  style={{ width: "100px", height: "100px" }}
/>
<Avatar readOnly src={imgSrc} alt="Isabella" borderRadius={"50px"} />

Labels

You can specify the content of the texts:

emptyLabel: when the source is not set.
changeLabel: when there is a valid source set.
loadingLabel: when you want to communicate that something is loading.

You can choose an image...

You can drink a cup of coffee in the meanwhile

<Avatar
  alt="Isabella"
  emptyLabel={"You can choose an image..."}
  onChange={() => {}}
/>
<Avatar
  src={imageSrc}
  alt="Isabella"
  changeLabel={"Do you want to change this amazing picture?"}
  onChange={() => {}}
/>
<Avatar
  src={imageSrc}
  alt="Isabella"
  loadingLabel={"You can drink a cup of coffee in the meanwhile"}
  isLoading={true}
/>

API

See the documentation below for a complete reference to all of the props available to the components mentioned here.

<Avatar/>