react-awesome-avatar-group

react-awesome-avatar-group is a library for showing avatar group image or text as avatar

Run this project

• npm i
• npm run start

Run this test

• npm run test

Run this coverage

• npm run test:coverage

Run this storybook (use node 16+) recomended v16.18.0 (npm v8.19.2)

• npm run storybook

Features

• small size
• easy to use

Installation

You can use npm

npm i react-awesome-avatargroup

or via Yarn

yarn add react-awesome-avatargroup

or directly import from component import AvatarGroup from "./components/AvatarGroup";

Usage

Here's a sample implementation

import React from "react";
import AvatarGroup from "./components/AvatarGroup";
// or via npm cause I alredy publish it
// import { AvatarGroup } from "react-awesome-avatar-group";

const App = () => {
  const names = [
    { name: 'John Doe', image: '' },
    { name: 'Jane Smith', image: 'https://64.media.tumblr.com/8cfaa4489602dd7eea5c7f9b82b444e1/d4c665ae64812e87-cd/s250x400/6ebec970fb11a33e2597a4ee0fe8698026fc3a24.png' },
    { name: 'Mike Johnson', image: 'https://www.w3schools.com/html/img_chania.jpg' },
    { name: 'Sarah Lee', image: 'https://www.w3schools.com/html/img_girl.jpg' },
    { name: 'Tom Davis', image: '' },
    { name: 'Emily White', image: 'https://www.w3schools.com/html/img_lights.jpg' },
  ];

  return (
    <div>
      <AvatarGroup size="lg" maxLength={3} names={names} />
    </div>
  );
};

export default App;

Result

Options

Option | Type | Default | Description --- | --- | --- | --- |names | Array Object | [] | An array of names contain name and image.| |size | string | md | Size of avattar |maxLength | number | 3 | Max length of the avatar displayed