react-notion-avatar
v1.1.12
Published
react library for generating notion-style avatar
Downloads
54
Maintainers
Readme
Assets
- Designer: @Felix Wong on ProductHunt
- Pack of illustrations: Noto avatar
Installation
npm install react-notion-avatar
or
yarn add react-notion-avatar
Usage
Import the component.
import { NotionAvatar, getRandomConfig } from 'react-notion-avatar'
Set the required config attribute, so that you can always rendering a same avatar with the configuration.
const config = { eye: 3, eyebrow: 3, face: 4, glass: 1, hair: 1, mouth: 2, nose: 3, accessory: 0, beard: 0, detail: 0, }
or generate a random config
const config = getRandomConfig()
tip
: config is an Object, please check the Attributes below for what attributes can be passed in.Render the component with specific width / height and configuration.
<NotionAvatar style={{ width: '6rem', height: '6rem' }} config={config} />
or
<NotionAvatar className="className" bgColor="#debaba" shape="square" config={config} />
Attributes
The Attributes can be passed into config
| key | type | default | accept |
| ----------- | ------ | ------- | ------ |
| face
| number | | 0~11 |
| eye
| number | | 0~14 |
| eyebrow
| number | | 0~16 |
| glass
| number | | 0~13 |
| hair
| number | | 0~58 |
| mouth
| number | | 0~20 |
| nose
| number | | 0~14 |
| accessory
| number | 0 | 0~13 |
| beard
| number | 0 | 0~17 |
| detail
| number | 0 | 0~14 |
or as React props
| key | type | default | options | tips |
| ----------- | ------ | -------- | ------------------------------------ | -------------------- |
| className
| string | | | Only for React Props |
| style
| object | | | Only for React Props |
| shape
| string | 'circle' | 'circle' , 'rounded' , 'square' | Only for React Props |
| bgColor
| string | | Hexadecimal , RGB , HSL , Predefined | Only for React Props |
Development
- Clone the repo:
$ git clone [email protected]:zonemeen/react-notion-avatar.git $ cd react-notion-avatar
- Install dependencies:
Or$ yarn
$ npm install
- Start the server for the example:
Or$ yarn start
$ npm run start
- Open the browser to reivew the example:
$ open http://localhost:8080
- Edit the files inside src.