React-avatar-editor-v1 NPM

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:

npm install react-avatar-editor-v1
# or
yarn add react-avatar-editor-v1

Usage

Importing Components

import React, { useState } from 'react';
import ReactAvatarEditor, { ReactNiceAvatar } from 'react-avatar-editor-v1';
import 'react-avatar-editor-v1/dist/main.scss';

const App = () => {
    const [config, setConfig] = useState({});

    return (
        <div>
            {/* Display the avatar */}
            <ReactNiceAvatar {...config} style={{ width: '10rem', height: '10rem' }} />

            {/* Avatar Editor Component */}
            <ReactAvatarEditor config={config} setConfig={setConfig} />
        </div>
    );
};

export 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: Demo

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.