Skip to content

zonemeen/react-notion-avatar

Repository files navigation

React Notion Avatar

imagewall

简体中文

Assets

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.