zonemeen / react-notion-avatar

✨ React library for generating notion-style avatar

React Notion Avatar

简体中文

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.

react-notion-avatar's Issues

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

This repository currently has no open or pending branches.

Detected dependencies

github-actions

.github/workflows/npm-publish.yml

• actions/checkout v3
• actions/setup-node v3

npm

package.json

• @testing-library/jest-dom ^5.16.2
• @testing-library/react ^13.0.0
• @testing-library/user-event ^14.0.0
• @types/canvas-confetti ^1.4.2
• @types/dom-to-image ^2.6.4
• @types/file-saver ^2.0.3
• @types/jest ^28.0.0
• @types/node ^16.11.26
• @types/react ^18.0.14
• @types/react-dom ^18.0.0
• canvas-confetti ^1.5.1
• classnames ^2.3.1
• dom-to-image ^2.6.0
• file-saver ^2.0.5
• i18next ^21.6.14
• react ^18.0.0
• react-colorful ^5.5.1
• react-dom ^18.0.0
• react-i18next ^11.15.6
• react-notion-avatar ^1.1.12
• react-scripts ^5.0.0
• typescript ^4.6.2
• autoprefixer 10.4.8
• bumpp 8.2.1
• postcss 8.4.16
• postcss-loader 7.0.1
• prettier 2.7.1
• sass 1.54.4
• tailwindcss 3.1.8
• unbuild 0.8.8

---

• Check this box to trigger a request for Renovate to run again on this repository