Package Exports

react-notion-avatar
react-notion-avatar/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-notion-avatar) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Notion Avatar

简体中文

Assets

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

Installation

npm install react-notion-avatar

yarn add react-notion-avatar

Usage

Import the component.

import NotionAvatar from 'react-notion-avatar'

Set the 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,
}
```
tip: config is an Object, please check the Attributes below for what attributes can be passed in.

Note: If you don't set the config attribute, component will generate a random avatar.

Render the component with specific width / height and configuration.

<NotionAvatar style={{ width: '6rem', height: '6rem' }} config={config} />

<NotionAvatar className="className" config={config} />

 <NotionAvatar />

Attributes

The Attributes can be passed into config

key	type	default	accept
`face`	number		0~10
`eye`	number		0~10
`eyebrow`	number		0~10
`glass`	number		0~10
`hair`	number		0~30
`mouth`	number		0~10
`nose`	number		0~10
`accessory`	number	0	0~10
`beard`	number	0	0~10
`detail`	number	0	0~10

or as React props

key	type	tips
`id`	string	Only for React Props
`className`	string	Only for React Props
`style`	object	Only for React Props

Development

Clone the repo:

$ git clone git@github.com:miqilin21/react-notion-avatar.git
$ cd react-notion-avatar

Install dependencies:
```
$ yarn
```
Or
```
$ npm install
```
Start the server for the example:
```
$ yarn dev
```
Or
```
$ npm run dev
```
Open the browser to reivew the example:
```
$ open http://localhost:8080
```
Edit the files inside src.

License

Released under MIT by @miqilin21.