A customizable Inline Avatar stack
npm install @keyvaluesystems/react-inline-avatars
> A customizable ready to use Inline Avatar stack for React
Try tweaking a inline avatar stack using this codesandbox link here
The easiest way to use react-inline-avatars is to install it from npm and build it into your app with Webpack.
``bash`
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.
React Inline Avatars can run in a very basic mode by just providing the data like given below:
`jsx
import InlineImages from "@keyvaluesystems/react-inline-avatars";
`
The data is an array of objects with the following keys:
- name - a string that represents each user's nameavatarUrl
- - a string to specify the user imagerenderComponent
- - 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:
`jsx`
const dataArray = [
{
name: "Jon Dew",
avatarUrl: "example.svg"
},
{
name: "Jack",
renderComponent: () => (
Sample Component
)
}
];
If no avatarUrl is specified for the user, following default Image will be considered.
This release includes breaking changes, new features, and updates. Please read this document carefully before upgrading
- elivateOnHover prop is renamed to elevateOnHover.nameOnHover
- prop is renamed to showNameOnHover.ExtraValue
- class is renamed to ExtraCount.
- Replace elivateOnHover with elevateOnHover: The elivateOnHover prop has been replaced with elevateOnHover.nameOnHover
- Replace with showNameOnHover: The nameOnHover prop has been replaced with showNameOnHover.ExtraCount
- Utilize class instead of ExtraValue class: To override the style of additional count displayed at last bubble.
Before
`jsx`
elivateOnHover={true}
nameOnHover={true}
styles={{
Avatar: () => ({ ...styles }),
Name: () => ({ ...styles }),
ExtraValue: () => ({ ...styles })
}}
/>
After
`jsx`
elevateOnHover={true}
showNameOnHover={true}
styles={{
Avatar: () => ({ ...styles }),
Name: () => ({ ...styles }),
ExtraCount: () => ({ ...styles })
}}
/>
Props that can be passed to the component are listed below:
| Prop | Description | Default |
|---|---|---|
data: object[] | An array of user objects to specify the name and avatar url (image url) | undefined |
totalUserCount?: number | To specify the total number of users present if the additional count is to be displayed at the end of the image stack. The additional count displayed will be the difference between this value and length of data array | 0 |
size?: number | To specify the size of the image element | 40 |
variant?: 'circular' | 'square' | 'rounded' | To specify the shape of the image element | 'circular' |
elevateOnHover?: boolean | To add an elevation effect on hover action for user images | false |
showNameOnHover?: boolean | To show the name of each user on hovering over the user image. If there is a specified render component in the data array, it will be displayed instead of the name when you hover over the user's image | false |
defaultAvatarImage?: string | To show a default avatar, if no avatarUrl is specified for a user. if there is no specified avatarUrl and defaultAvatarImage, default image will be considered. | |
onUserClick?:(user: object) => void | A callback function to be triggered on image click | undefined |
onCountClick?:() => void | A callback function to be triggered on additional count(last bubble) click | undefined |
spaceBetweenPics?: number | To specify the distance between each avatar (user image) | 20 |
styles?: object | To override the default styles provided by this package. | undefined |
All the default styles provided by this package are overridable using the styles prop.
The below code shows all the overridable styles:
`jsx
styles={{
Avatar: () => ({ ...styles }),
Name: () => ({ ...styles }),
ExtraCount: () => ({ ...styles }),
}}
/>
`
- Avatar - Overrides the avatar (user image) styleName
- - Overrides the user name styleExtraCount
- - Overrides the style of additional count displayed at last bubble
Example with the usage of other props
`jsx
styles= {
Avatar: () => ({
border: "1px solid white"
}),
Name: () => ({
color: "white",
fontSize: "16px",
backgroundColor: "grey",
padding: "5px",
borderRadius: "10px"
}),
ExtraCount: () => ({
backgroundColor: "yellow",
border: "1px solid white"
})
}
/>
``