简体中文

Assets

• Designer: @Felix Wong on ProductHunt
• Pack of illustrations: Noto avatar

Installation

npm install react-notion-avatar

or

yarn add react-notion-avatar

Usage

1. Import the component.

   import { NotionAvatar, getRandomConfig } from 'react-notion-avatar'

2. 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.

3. 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

1. Clone the repo:

   $ git clone [email protected]:zonemeen/react-notion-avatar.git
   $ cd react-notion-avatar

2. Install dependencies:

   $ yarn

   Or

   $ npm install

3. Start the server for the example:

   $ yarn start

   Or

   $ npm run start

4. Open the browser to reivew the example:

   $ open http://localhost:8080

5. Edit the files inside src.

License

Released under MIT by @zonemeen.