✨ React library for generating notion-style avatar
MIT License
npm install react-notion-avatar
or
yarn add react-notion-avatar
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}
/>
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 |
$ git clone [email protected]:zonemeen/react-notion-avatar.git
$ cd react-notion-avatar
$ yarn
Or
$ npm install
$ yarn start
Or
$ npm run start
$ open http://localhost:8080