@placardi/avatar

An avatar is a visual representation of a user or entity.

Installation

npm i @placardi/avatar

Dependencies

• react
• styled-components
• @placardi/theme

Usage

Basic usage

In order to use the avatar component, wrap the application in global theme provider from @placardi/theme. Then, use the avatar as any regular component.

Avatar uses the abbreviation element (<abbr>) under the hood. Initials will show up once title prop is provided to the component.

import React, { FC } from 'react';
import ThemeProvider from '@placardi/theme';
import Avatar from '@placardi/avatar';

const App: FC = () => (
  <ThemeProvider>
    <Avatar title='John Doe' />
  </ThemeProvider>
);

export default App;

Avatar size

Avatar size can be customised using the Size enum that comes packaged with the avatar component. Pass a size prop to the avatar in order to change its size. The default is set to Size.MEDIUM.

import React, { FC } from 'react';
import ThemeProvider from '@placardi/theme';
import Avatar, { Size } from '@placardi/avatar';

const App: FC = () => (
  <ThemeProvider>
    <Avatar title='John Doe' size={Size.LARGE} />
  </ThemeProvider>
);

export default App;

Avatar colour

Avatar colour can be customised using the Colour enum that comes packaged with the brand theme. Pass a colour prop to the avatar in order to change its colour. The default is set to Colour.BLUE.

import React, { FC } from 'react';
import ThemeProvider, { Colour } from '@placardi/theme';
import Avatar from '@placardi/avatar';

const App: FC = () => (
  <ThemeProvider>
    <Avatar title='John Doe' colour={Colour.BLUE} />
  </ThemeProvider>
);

export default App;

Pointable avatar

Avatar can respond to pointer events. Pass one of the following props: [pointable, onClick] to the avatar in order to change its pointer bahaviour. By default, all pointer events are ignored.

import React, { FC } from 'react';
import ThemeProvider from '@placardi/theme';
import Avatar from '@placardi/avatar';

const App: FC = () => (
  <ThemeProvider>
    <Avatar title='John Doe' pointable />
  </ThemeProvider>
);

export default App;