React Inline Avatars

A customizable ready to use Inline Avatar stack for React

Try tweaking a inline avatar stack using this codesandbox link here

Installation

The easiest way to use react-inline-avatars is to install it from npm and build it into your app with Webpack.

npm install @keyvaluesystems/react-inline-avatars

You’ll need to install React separately since it isn't included in the package.

Note for Next.js users, if you are using Next.js version 13 or later, you will have to use the use client feature to ensure proper compatibility.

Usage

React Inline Avatars can run in a very basic mode by just providing the data like given below:

import InlineImages from "@keyvaluesystems/react-inline-avatars";

<InlineImages data={dataArray} />;

The data is an array of objects with the following keys:

• name - a string that represents each user's name
• avatarUrl - a string to specify the user image
• renderComponent - a JSX element that, when provided, enables the dynamic rendering of custom content when hovering over user's image

An example for data array is shown below:

const dataArray = [
  {
    name: "Jon Dew",
    avatarUrl: "example.svg"
  },
  {
    name: "Jack",
    renderComponent: () => (
      <div className="sample-class"> Sample Component </div>
    )
  }
];

If no avatarUrl is specified for the user, following default Image will be considered.

v1.0.0 (Major Version Change)

This release includes breaking changes, new features, and updates. Please read this document carefully before upgrading

Breaking Changes

• elivateOnHover prop is renamed to elevateOnHover.
• nameOnHover prop is renamed to showNameOnHover.
• ExtraValue class is renamed to ExtraCount.

Migration Steps

• Replace elivateOnHover with elevateOnHover: The elivateOnHover prop has been replaced with elevateOnHover.
• Replace nameOnHover with showNameOnHover: The nameOnHover prop has been replaced with showNameOnHover.
• Utilize ExtraCount class instead of ExtraValue class: To override the style of additional count displayed at last bubble.

Before

<InlineImages
  data={dataArray}
  elivateOnHover={true}
  nameOnHover={true}
  styles={{
    Avatar: () => ({ ...styles }),
    Name: () => ({ ...styles }),
    ExtraValue: () => ({ ...styles })
  }}
/>

After

<InlineImages
  data={dataArray}
  elevateOnHover={true}
  showNameOnHover={true}
  styles={{
    Avatar: () => ({ ...styles }),
    Name: () => ({ ...styles }),
    ExtraCount: () => ({ ...styles })
  }}
/>

Props

Props that can be passed to the component are listed below:

Style Customizations

All the default styles provided by this package are overridable using the styles prop. The below code shows all the overridable styles:

<InlineImages
  data={dataArray}
  styles={{
    Avatar: () => ({ ...styles }),
    Name: () => ({ ...styles }),
    ExtraCount: () => ({ ...styles }),
  }}
/>

• Avatar - Overrides the avatar (user image) style
• Name - Overrides the user name style
• ExtraCount - Overrides the style of additional count displayed at last bubble

Example with the usage of other props

<InlineImages
  data={dataArray}
  styles= {
    Avatar: () => ({
      border: "1px solid white"
    }),
    Name: () => ({
      color: "white",
      fontSize: "16px",
      backgroundColor: "grey",
      padding: "5px",
      borderRadius: "10px"
    }),
    ExtraCount: () => ({
      backgroundColor: "yellow",
      border: "1px solid white"
    })
  }
/>