npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-avatar-group

v1.0.2

Published

<p> <a href="https://easybase.io"> <img src="/assets/example.gif" alt="easybase logo black" height="100"> </a> </p>

Downloads

4,640

Readme

react-avatar-group

Developer-friendly React component to display responsive user avatars. Avatar images are powered by UI Avatars. Some wilder variations can be seen here.

Basic Usage:

npm install react-avatar-group
import React from 'react';
import AvatarGroup from 'react-avatar-group';

function App() {
  return (
    <AvatarGroup
      avatars={["James", "Amy", "Will" /* or IAvatar objects */]}
      initialCharacters={1}
      max={3}
      size={60}
      displayAllOnHover
      shadow={2}
    />
  )
}

Props

avatars: (string | IAvatar)[]

Array of strings with avatar names or Avatar object for more control

onAvatarClick?(avatar: string | IAvatar, index: number): any

Click handler for individual avatars

max?: number

Limit the number of avatars that can be shown at once. If the avatar array length is greater than this number, an overflow avatar will be shown detailing how many avatars are hidden.

displayAllOnHover?: boolean

If max is provided and displayAllOnHover is true, even the overflowing avatars will be shown when the mouse hovers over the group element

square?: boolean

Should the avatars be square instead of rounded

size?: number

Avatar image size in pixels. Between: 16 and 512

randomBackgroundColors?: string[]

Array of Hex colors to choose from as background colors, without the hash (#). This will be overridden by backgroundColor

shadow?: number

Box-shadow elevation as an integer from 1 to 5

style?: React.CSSProperties

avatarStyle?: React.CSSProperties

Styles applied to all individual avatar components

hideTooltip?: boolean

Don't display a tooltip when the mouse hovers over an individual avatar

fontSize?: number

Font size in percentage of size. Between 0.1 and 1

uppercase?: boolean

Decide if the API should uppercase the name/initials

bold?: boolean

Boolean specifying if the returned letters should use a bold font

initialCharacters?: number

Length of the generated initials

backgroundColor?: string

Hex color for the image background, without the hash (#). Overrides randomBackgroundColors

fontColor?: string

Hex color for the font, without the hash (#)

tooltipStyle?: React.CSSProperties

Styles applied to all tooltips

tooltipArrow?: boolean

Display a small arrow on the tooltip

IAvatar

This is an object that can be passed in the avatars array (instead of a string) for more control over individual avatars. All of these props will override the corresponding ones above.

avatar: string

The required avatar string

tooltip?: string

Custom text to put in the tooltip, rather than the avatar string

backgroundColor?: string

fontColor?: string

style?: React.CSSProperties

fontSize?: number

Built With

TODO

  1. Allow for custom image urls
  2. Codepen example