@commercetools-uikit/avatar
Version:
A component for rendering profile images
58 lines (42 loc) • 2.21 kB
Markdown
<!-- THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -->
<!-- This file is created by the `pnpm generate-readme` script. -->
# Avatar
## Description
A component for rendering profile images
## Installation
```
pnpm add @commercetools-uikit/avatar
```
```
npm --save install @commercetools-uikit/avatar
```
Additionally install the peer dependencies (if not present)
```
pnpm add react
```
```
npm --save install react
```
## Usage
```jsx
import Avatar from '@commercetools-uikit/avatar';
const Example = () => (
<Avatar
gravatarHash="20c9c1b252b46ab49d6f7a4cee9c3e68"
firstName="John"
lastName="Doe"
size="s"
/>
);
export default Example;
```
## Properties
| Props | Type | Required | Default | Description |
| --------------- | ------------------------------------------------------------------------------ | :------: | ---------- | --------------------------------------- |
| `firstName` | `string` | | `''` | The first name of the user. |
| `lastName` | `string` | | `''` | The last name of the user. |
| `gravatarHash` | `string` | ✅ | | The hashed string of the user gravatar. |
| `isHighlighted` | `boolean` | | `false` | Enhances the appearance of the avatar. |
| `size` | `union`<br/>Possible values:<br/>`'s' , 'm' , 'l'` | | `'s'` | The size of the rendered avatar. |
| `color` | `union`<br/>Possible values:<br/>`'accent' , 'purple' , 'turquoise' , 'brown'` | | `'accent'` | The color of the avatar. |
| `icon` | `ReactElement` | | | an <Icon /> component |