Creating Stylish Initial-Based Avatars in React

Have you ever noticed those little images on websites or apps that show the first letters of people's names? These are called "letter avatars." They're handy when users haven't uploaded a profile picture yet, and they add a nice touch to the interface.

What are Letter Avatars?

Letter avatars are like visual shortcuts for names. They're usually made up of the initial letters of a user's name or their first and last names. You might have seen single letters, two letters (for first and last names), or even three letters (for first, middle, and last names). These initials are often inside colored shapes like circles or squares, making them look cool and distinctive.

In this blog post, we're going to learn how to create these letter avatars using ReactJS. Yes, you heard it right! Let's dive in.

Before We Start

Before we get into the technical stuff, make sure you have a basic understanding of React and JavaScript. Also, grab a code editor and set up your React development environment.

Building the ProfileImage Component

We're going to build a component called ProfileImage. This smart component takes the user's name as input and generates a profile image using their initials.

import React from "react";

const ProfileImage = ({ name }) => {
  const nameParts = name.split(" ");
  const firstNameInitial = nameParts[0] ? nameParts[0][0] : "";
  const lastNameInitial = nameParts[1] ? nameParts[1][0] : "";

  return (
    <span className="user-profile-image">
      {firstNameInitial}
      {lastNameInitial}
    </span>
  );
};
export default ProfileImage;

Adding Some Style

To make these avatars visually appealing, we'll apply some basic CSS. Of course, you can tweak the CSS to match your project's design.

.main {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  flex-direction: column;
}
.user-profile-image {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  background-color: brown;
  color: #ffffff;
  font-size: 30px;
  border-radius: 50%;
  font-weight: 800;
}

Now that we have our ProfileImage component, let's use it in our app.

import "./styles.css";
import ProfileImage from "./ProfileImage";

const App = () => {
  return (
    <div className="main">
      <h1>User Profiles</h1>
      <ProfileImage name="Surbhi Dighe" />
    </div>
  );
};

export default App;

The Final Result

Ta-da! We're done. You've just learned how to create those nifty letter avatars using React. Now your user profiles will look more lively and engaging.

Experience the live demo of initial-based avatars in action by clicking on the sandbox link: Letter Avatars React - Live Demo

You also have the option to utilize the npm package for achieving the same functionality. The react-name-initials-avatar library offers a user-friendly solution to generate lettered avatars derived from usernames. This package is designed to produce visually pleasing avatars adorned with initials, thereby simplifying user identification at a quick glance.

Remember, this is just a starting point. You can expand and customize these avatars as you see fit. Happy coding! 🚀