React Avatar Editor

A React package that provides an easy-to-use avatar editor along with a customizable avatar display component.

Installation

You can install the package via npm or yarn:

1npm install react-avatar-editor-v1
2# or
3yarn add react-avatar-editor-v1

Usage

Importing Components

1import React, { useState } from 'react';
2import ReactAvatarEditor, { ReactNiceAvatar } from 'react-avatar-editor-v1';
3import 'react-avatar-editor-v1/dist/main.scss';
4
5const App = () => {
6    const [config, setConfig] = useState({});
7
8    return (
9        <div>
10            {/* Display the avatar */}
11            <ReactNiceAvatar {...config} style={{ width: '10rem', height: '10rem' }} />
12
13            {/* Avatar Editor Component */}
14            <ReactAvatarEditor config={config} setConfig={setConfig} />
15        </div>
16    );
17};
18
19export default App;

Props

ReactAvatarEditor

Prop	Type	Description
config	AvatarFullConfig	Avatar configuration object.
setConfig	Dispatch<SetStateAction<AvatarFullConfig>>	Function to update the avatar config.
withAvatarList	boolean (default: true)	Show/hide additional avatars list.

ReactNiceAvatar

This is directly imported from react-nice-avatar and can be used to display an avatar based on the config state.

Demo

Check out the demo GIF to see it in action:

Example Output

The ReactNiceAvatar component renders the avatar based on the provided configuration, while ReactAvatarEditor allows users to modify the avatar features in real time.

License

This project is licensed under the MIT License.