# [React Celebrity Avatars](https://www.npmjs.com/package/react-celebrity-avatars)

[![npm][npm-image]][npm-url]

[npm-image]: https://img.shields.io/npm/v/react-celebrity-avatars.svg?style=flat-square
[npm-url]: (https://www.npmjs.com/package/react-celebrity-avatars)

A Celebrity Avatar Library for React created by [Jagath Jayakumar](https://github.com/jagathgj).

## Installation

```bash
yarn add react-celebrity-avatars
# or
npm install react-celebrity-avatars --save
```

example usage

```jsx
import { Mohanlal } from 'react-celebrity-avatars';

const myComponent = () => {
  return (
    <Mohanlal
      className="custom-class other-class"
      status="online"
      size="1"
      shape="circle"
      theme="tan"
      borderTheme="sandstorm"
    />
  );
};
```

| Props         | Default     | Values                              | Notes                              |
| ------------- | ----------- | ----------------------------------- | ---------------------------------- |
| `className`   | `undefined` | `any string`                        | Can add one or more custom classes |
| `status`      | `1em`       | `online, busy`                      | Can use any of the values          |
| `style`       | `undefined` |                                     | Can overwrite size, theme, border  |
| `size`        | `1`         | `1, 2, 3, 4,...24`                  | Use any number `1` to `24`         |
| `shape`       | `circle`    | `circle, rounded, square`           | Can change shape of the avatar     |
| `theme`       | `undefined` | `dark, light, lavender, cherry` etc | Refer below listed values          |
| `borderTheme` | `undefined` | `dark, light, lavender, pink` etc   | Refer below listed values          |
| `title`       | `undefined` | `any string`                        | Description for accessibility      |

**theme:**

`dark`, `light`, `lavender`, `turquoise`, `pink`, `sandstorm`, `blue`, `lily`, `pearl`, `tan`, `marine`, `orange`, `fresh`, `hosanna`, `dreamy`, `love`, `piglet`, `mauve`, `shades`, `memory`, `social`, `cherry`, `insta`

**borderTheme:**

`dark`, `light`, `lavender`, `turquoise`, `pink`, `sandstorm`, `blue`, `lily`, `pearl`, `tan`, `marine`, `orange`, `fresh`

## Plugins used

The following plugins are utilized in this project:

**Rollup:**

- [@rollup/plugin-babel](https://github.com/rollup/plugins/tree/master/packages/babel)
- [rollup-plugin-filesize](https://github.com/ritz078/rollup-plugin-filesize)

**Babel:**

- [@babel/plugin-transform-runtime](https://babeljs.io/docs/en/babel-plugin-transform-runtime)

## Licence

MIT

- Avatars are designed by different designers, whose names are available in documentation website (under construction).