{"id":18876210,"url":"https://github.com/keyvaluesoftwaresystems/react-inline-avatars","last_synced_at":"2025-04-14T17:31:57.298Z","repository":{"id":143610431,"uuid":"614807488","full_name":"KeyValueSoftwareSystems/react-inline-avatars","owner":"KeyValueSoftwareSystems","description":"A customizable ready to use inline avatar stack for React applications","archived":false,"fork":false,"pushed_at":"2024-04-22T09:59:27.000Z","size":2670,"stargazers_count":4,"open_issues_count":3,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-09-25T21:07:51.994Z","etag":null,"topics":["inline-images","multi-inline-images","react","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KeyValueSoftwareSystems.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2023-03-16T11:10:32.000Z","updated_at":"2024-04-22T09:59:19.000Z","dependencies_parsed_at":"2023-11-13T11:27:50.048Z","dependency_job_id":"0943bae3-03ad-4c91-be2e-486e16419127","html_url":"https://github.com/KeyValueSoftwareSystems/react-inline-avatars","commit_stats":null,"previous_names":["keyvaluesoftwaresystems/react-inline-avatars","keyvaluesoftwaresystems/react-multi-inline-images"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KeyValueSoftwareSystems%2Freact-inline-avatars","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KeyValueSoftwareSystems%2Freact-inline-avatars/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KeyValueSoftwareSystems%2Freact-inline-avatars/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KeyValueSoftwareSystems%2Freact-inline-avatars/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KeyValueSoftwareSystems","download_url":"https://codeload.github.com/KeyValueSoftwareSystems/react-inline-avatars/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223639328,"owners_count":17177816,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["inline-images","multi-inline-images","react","typescript"],"created_at":"2024-11-08T06:11:40.333Z","updated_at":"2024-11-08T06:11:40.982Z","avatar_url":"https://github.com/KeyValueSoftwareSystems.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Inline Avatars\n\n\u003ca href=\"https://www.npmjs.com/package/@keyvaluesystems/react-inline-avatars\"\u003e\u003cimg src=\"https://badgen.net/npm/v/@keyvaluesystems/react-inline-avatars?color=blue\" alt=\"npm version\"\u003e\u003c/a\u003e \u003ca href=\"https://www.npmjs.com/package/@keyvaluesystems/react-inline-avatars\" \u003e\u003cimg src=\"https://img.shields.io/npm/dw/@keyvaluesystems/react-inline-avatars?label=Downloads\" /\u003e\u003c/a\u003e \u003ca href=\"https://github.com/KeyValueSoftwareSystems/react-inline-avatars\"\u003e\u003cimg src=\"https://github.com/KeyValueSoftwareSystems/react-inline-avatars/actions/workflows/deploy.yml/badge.svg\" alt=\"\" /\u003e\u003c/a\u003e\n\n\u003cdiv align=\"center\"\u003e\n\u003cimg src=\"./screenshot.png\" alt=\"\" width=\"280\" height=\"80\"/\u003e\n\u003c/div\u003e\n\n\u003e A customizable ready to use Inline Avatar stack for React\n\nTry tweaking a inline avatar stack using this codesandbox link \u003ca href=\"https://codesandbox.io/p/sandbox/react-inline-avatars-2lvdgf\" \u003ehere\u003c/a\u003e\n\n## Installation\n\nThe easiest way to use react-inline-avatars is to install it from npm and build it into your app with Webpack.\n\n```bash\nnpm install @keyvaluesystems/react-inline-avatars\n```\n\nYou’ll need to install React separately since it isn't included in the package.\n\nNote 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.\n\n## Usage\n\nReact Inline Avatars can run in a very basic mode by just providing the `data` like given below:\n\n```jsx\nimport InlineImages from \"@keyvaluesystems/react-inline-avatars\";\n\n\u003cInlineImages data={dataArray} /\u003e;\n```\n\nThe data is an array of objects with the following keys:\n\n- `name` - a string that represents each user's name\n- `avatarUrl` - a string to specify the user image\n- `renderComponent` - a JSX element that, when provided, enables the dynamic rendering of custom content when hovering over user's image\n\nAn example for data array is shown below:\n\n```jsx\nconst dataArray = [\n  {\n    name: \"Jon Dew\",\n    avatarUrl: \"example.svg\"\n  },\n  {\n    name: \"Jack\",\n    renderComponent: () =\u003e (\n      \u003cdiv className=\"sample-class\"\u003e Sample Component \u003c/div\u003e\n    )\n  }\n];\n```\n\nIf no avatarUrl is specified for the user, following default Image will be considered.\n\n\u003cdiv align=\"center\"\u003e\n\u003cimg src=\"./src/assets/default-avatar.svg\" alt=\"\" width=\"40\" height=\"40\"/\u003e\n\u003c/div\u003e\n\n\n## v1.0.0 (Major Version Change)\n\nThis release includes breaking changes, new features, and updates. Please read this document carefully before upgrading\n\n### Breaking Changes\n\n- `elivateOnHover` prop is renamed to `elevateOnHover`.\n- `nameOnHover` prop is renamed to `showNameOnHover`.\n- `ExtraValue` class is renamed to `ExtraCount`.\n\n\n### Migration Steps\n\n- Replace `elivateOnHover` with elevateOnHover: The `elivateOnHover` prop has been replaced with `elevateOnHover`.\n- Replace `nameOnHover` with showNameOnHover: The `nameOnHover` prop has been replaced with `showNameOnHover`.\n- Utilize `ExtraCount` class instead of `ExtraValue` class: To override the style of additional count displayed at last bubble.\n\n\u003cb\u003eBefore\u003c/b\u003e\n\n```jsx\n\u003cInlineImages\n  data={dataArray}\n  elivateOnHover={true}\n  nameOnHover={true}\n  styles={{\n    Avatar: () =\u003e ({ ...styles }),\n    Name: () =\u003e ({ ...styles }),\n    ExtraValue: () =\u003e ({ ...styles })\n  }}\n/\u003e\n```\n\n\u003cb\u003eAfter\u003c/b\u003e\n\n```jsx\n\u003cInlineImages\n  data={dataArray}\n  elevateOnHover={true}\n  showNameOnHover={true}\n  styles={{\n    Avatar: () =\u003e ({ ...styles }),\n    Name: () =\u003e ({ ...styles }),\n    ExtraCount: () =\u003e ({ ...styles })\n  }}\n/\u003e\n```\n\n## Props\n\nProps that can be passed to the component are listed below:\n\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003eProp\u003c/th\u003e\n      \u003cth\u003eDescription\u003c/th\u003e\n      \u003cth\u003eDefault\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003e\u003cb\u003edata:\u003c/b\u003e object[]\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\n      An array of user objects to specify the name and avatar url (image url)\n      \u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eundefined\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003e\u003cb\u003etotalUserCount?:\u003c/b\u003e number\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\n      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\n      \u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e0\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n     \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003e\u003cb\u003esize?:\u003c/b\u003e number\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\n      To specify the size of the image element\n      \u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e40\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n     \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003e\u003cb\u003evariant?:\u003c/b\u003e 'circular' | 'square' | 'rounded'\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\n      To specify the shape of the image element\n      \u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e'circular'\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003e\u003cb\u003eelevateOnHover?:\u003c/b\u003e boolean\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\n      To add an elevation effect on hover action for user images\n      \u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003e\u003cb\u003eshowNameOnHover?:\u003c/b\u003e boolean\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\n        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\n      \u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n      \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003e\u003cb\u003edefaultAvatarImage?:\u003c/b\u003e string\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\n       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.\n      \u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e\u003cimg src=\"./src/assets/default-avatar.svg\" alt=\"\" width=\"40\" height=\"40\"/\u003e\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003e\u003cb\u003eonUserClick?:\u003c/b\u003e(user: object) =\u003e void\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\n        A callback function to be triggered on image click\n      \u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eundefined\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n     \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003e\u003cb\u003eonCountClick?:\u003c/b\u003e() =\u003e void\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\n        A callback function to be triggered on additional count(last bubble) click\n      \u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eundefined\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003e\u003cb\u003espaceBetweenPics?:\u003c/b\u003e number\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\n        To specify the distance between each avatar (user image)\n      \u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e20\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n     \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003e\u003cb\u003estyles?:\u003c/b\u003e object\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\n        To override the default styles provided by this package. \n      \u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eundefined\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n## Style Customizations\n\nAll the default styles provided by this package are overridable using the `styles` prop.\nThe below code shows all the overridable styles:\n\n```jsx\n\u003cInlineImages\n  data={dataArray}\n  styles={{\n    Avatar: () =\u003e ({ ...styles }),\n    Name: () =\u003e ({ ...styles }),\n    ExtraCount: () =\u003e ({ ...styles }),\n  }}\n/\u003e\n\n```\n\n- `Avatar` - Overrides the avatar (user image) style\n- `Name` - Overrides the user name style\n- `ExtraCount` - Overrides the style of additional count displayed at last bubble\n\nExample with the usage of other props\n\n```jsx\n\u003cInlineImages\n  data={dataArray}\n  styles= {\n    Avatar: () =\u003e ({\n      border: \"1px solid white\"\n    }),\n    Name: () =\u003e ({\n      color: \"white\",\n      fontSize: \"16px\",\n      backgroundColor: \"grey\",\n      padding: \"5px\",\n      borderRadius: \"10px\"\n    }),\n    ExtraCount: () =\u003e ({\n      backgroundColor: \"yellow\",\n      border: \"1px solid white\"\n    })\n  }\n/\u003e\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkeyvaluesoftwaresystems%2Freact-inline-avatars","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkeyvaluesoftwaresystems%2Freact-inline-avatars","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkeyvaluesoftwaresystems%2Freact-inline-avatars/lists"}