1.1.12 • Published 2 years ago
react-notion-avatar v1.1.12
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 git@github.com: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.
License
1.1.12
2 years ago
1.1.11
2 years ago
1.1.1
2 years ago
1.1.0
2 years ago
1.1.9
2 years ago
1.1.8
2 years ago
1.0.9
2 years ago
1.1.7
2 years ago
1.0.8
2 years ago
1.1.6
2 years ago
1.0.7
2 years ago
1.1.5
2 years ago
1.1.4
2 years ago
1.1.3
2 years ago
1.1.2
2 years ago
1.0.2
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago