React - Avatars and Avatar Groups
Avatar components are a huge part of our pages nowadays. From homepages to profile, the proliferation of round avatars everywhere. What would be the challenges of just adding an image in place?
- Images take time to load, the space would be empty till then. This also means the layout jumps around when the image loads (if size was not explicitly specified beforehand)
- There might be faulty links with unprocessed images and these end up with a nasty broken image.
- Text based avatars are easy to create but hard to maintain consistency.
- When text in avatars is too long, it breaks the design down.
- If you are choosing from lots of different colors, then the reading contrast for text fallbacks becomes an issue.
- Stacking multiple images together.
- Ensuring consistency across many different use cases.
I'm open sourcing a component that I have been using to work around these issues:
npm install @agney/react-avatar
# OR
yarn add @agney/react-avatar
Currently it requires React 16.8 or above and Styled Components v4 or above.
Styled Components is a dependency that I'm actively trying to abstract out.
Features ✨
- Ability to render image avatar or text avatar as circle or square.
- Ability to render text based fallbacks for images for the time they take to load or error.
- Renders text based avatars and backgrounds based on text passed in.
- Autoscales text if it doesn't fit the container width.
- Automatically determines readable text color depending on background.
- Exposes a hook to use/generate gravatar for a user.
- Exposes a context so you can configure avatar components across your application.
Usage
import { Avatar } from "@agney/react-avatar";
import React from "react";
const App = () => {
return (
<Avatar
src="https://gravatar.com/avatar/7c4ff521986b4ff8d29440beec01972d?s=400&d=robohash&r=x"
text="CM"
/>
);
};
export default App;
For full documentation, visit Github Repository
Follow me on Twitter for updates.