custom-stack-avatar

This component lets you stack images by passing it an array of objects. In it's default style, the component is rendered as

The basic usage of the component is

import StackAvatar from "custom-stack-avatar";

const avatarList = [
  {
    id: 0,
    imageUrl: "https://randomuser.me/api/portraits/men/52.jpg",
  },
  {
    id: 1,
    imageUrl: "https://randomuser.me/api/portraits/men/51.jpg",
  },
  {
    id: 2,
    imageUrl: "https://randomuser.me/api/portraits/women/1.jpg",
  },
];

return <StackAvatar faces={avatarList} />;

Note that in the above example, the key is id and the imageUrl is the url link of the image.

Component Configuration

The following props can be configured for this component

| Prop | Description | Default | | :------------------ | :------------------------------------------------------------------------------------------------------------------------ | :------------- | | faces | Contains the array of objects with each object containing a key with id as number and key imageUrl as url string of image | mandatory prop | | numFaces | Determines how many stacked avatars should be displayed | 4 | | circleSize | size of each stack avatar | 20 | | offset | space between each avatar(value must be <= 1) | 1 | | onHandlePress | function to be called when pressing stack avatar | void | | render | function to render custom stack avatar( render(faces,numFaces) => return JSX element) | void | | containerStyle | container style for stack avatar | | | overFlowCircleStyle | overflow circle style | | | imageStyle | image style | | | overFlowLabelStyle | overflow text style | | | showOverFlow | whether to show overflow circle | true |

Important Note

Do not provide offset value to more than 1.