How to create an avatar feature with React

Over the years, avatars have become a popular way of providing a visual representations of users, especially among applications that involve interactions between people. You have avatars for social media applications, chat applications, GitHub, and so on. Avatars, in this context, are images (mostly circular) that represent a user and make them easily recognizable to other users.

If you’ve tried to implement a way for your users to upload their avatar photos in your React application from scratch, you would have to worry about many things, like accepting user photos, cropping and resizing those photos, and probably encoding them in a format like base64 to be downloaded or sent to the server for storage.

This can be time-consuming, and as in most situations like this, it’s best not to reinvent the wheel — better to use an existing library. One such library is react-avatar.

In this article, we will take a look at this library, what it does, and, by the end of the article, create a simple React app wherein users can import an image from their computer, use it to make an avatar, and download the avatar to their computer.

Prerequisites

To follow along perfectly with this article, you should have a basic understanding of React and JavaScript.

The react-avatar library

react-avatar is a React-based library that allows you to implement avatar creation, allowing users to preview and crop their preferred images to create an avatar. It is also customizable, so you can style the React components to fit the rest of your application. Now that we have the bare minimum covered, let’s take a look at some code.

The Avatar component

The library’s only component is the Avatar component, which is what we use to select and crop the image for our avatar. Here’s a basic example of the Avatar component in use:

function App() {
  const [preview, setPreview] = useState(null);
  function onClose() {
    setPreview(null);
  }
  function onCrop(pv) {
    setPreview(pv);
  }
  function onBeforeFileLoad(elem) {
    if (elem.target.files[0].size > 71680) {
      alert("File is too big!");
      elem.target.value = "";
    }
  }
  return (
    <div>
      <Avatar
        width={300}
        height={300}
        onCrop={onCrop}
        onClose={onClose}
        onBeforeFileLoad={onBeforeFileLoad}
        src={null}
      />
      {preview && <img src={preview} alt="Preview" />}
    </div>
  );
}
export default App;

With the code above, the result on your browser should look like this:

You can now click the box, which I’ll henceforth call the preview box, to select an image to use for your avatar. That’s how easy it is!

Before we move on, I would like to explain the different props of the Avatar component.

height and width

These props define the height and width of the preview box.

onCrop

You can think of onCrop as an event listener that is triggered whenever the avatar image is cropped. Since onCrop is a function, it can take argument;, in this case, the argument is the cropped image encoded in base64 format.

onClose

When an image has been selected, a cancel icon appears in the top-left corner of the preview box.

---

Over 200k developers use LogRocket to create better digital experiences

Learn more →

---

Clicking this icon will trigger the onClose event listener and the function passed to the onClose prop will run. In the code above, we set the preview state variable to null anytime the preview box is closed.

onBeforeFileLoad

Behind the scenes, the preview box contains an <input type="file"> element, which is how it is able to get files from the user’s computer to process.

onBeforeFileLoad is triggered whenever a user selects an image to use for their avatar, and the argument passed to it is the event object of the file selection event. From this object, we can obtain information about the selected file, such as its size, and use that information to perform other operations like limiting the size of the image to be used for the avatar (as in our case).

Also notice that we set the value property of the target element to an empty string if the file size is greater than the specified size. This is because the library checks the value property and stops the avatar creation process (which is what we want) if it’s an empty string.

onFileLoad

onFileLoad is another event listener, which is called almost immediately after the onBeforeFileLoad function is run. It also takes in the event object of the event, so you can do everything you would do in onBeforeFileLoad here. The only difference is that the library ensures the value property of the event object is not empty before calling the onFileLoad function.

label and labelStyle

label defines the text displayed on the preview box before an image is selected, while labelStyle defines the style of that text.

Now that we’ve covered most of the props, we can build our simple app, which allows users to create avatars and download them to their devices.

Setting up a React project

First of all, we need to set up a new React project. You can easily do this with create-react-app:

npx create-react-app avatar-project

Once we’re done creating our React project, we need to install the react-avatar library as a dependency. In your terminal, install it like so:

npm install react-avatar-edit

Now that we have our project set up, let’s get started with the code. We can use the code in the first block above as our starting point, so copy that into your code editor.

Now that we have a way to make avatars out of our images, we just need to find a way to download the avatars to our devices. We can easily use an anchor tag with the download attribute set to the name of the downloaded avatar (which can be whatever we want it to be) and the href attribute set to the base64-encoded format of the avatar, which is the value of the preview state variable.

The code for our simple app should look like this:

import React from "react";
import Avatar from "react-avatar-edit";
import { useState } from "react";

function App() {
  const [preview, setPreview] = useState(null);
  function onClose() {
    setPreview(null);
  }
  function onCrop(pv) {
    setPreview(pv);
  }
  function onBeforeFileLoad(elem) {
    if (elem.target.files[0].size > 2000000) {
      alert("File is too big!");
      elem.target.value = "";
    }
  }
  return (
    <div>
      <Avatar
        width={600}
        height={300}
        onCrop={onCrop}
        onClose={onClose}
        onBeforeFileLoad={onBeforeFileLoad}
        src={null}
      />
      <br/>
      {preview && (
        <>
          <img src={preview} alt="Preview" />
          <a href={preview} download="avatar">
            Download image
          </a>
        </>
      )}
    </div>
  );
}
export default App;

Now, users should be able to create avatars out of their preferred image and download those avatars to their devices.

Customization

You might decide to customize the preview box to fit the theme of your application or to make your app look more interesting. As I said earlier, you can use label and labelStyle to customize the text displayed at the center of the preview box before an image is selected.

There are also other customization props, like borderStyle, which we can use to customize the border style of the preview box; backgroundColor, to set the background color of the preview box when an image has been selected; shadingColor for customizing the color of the parts of the selected image to be cropped out; and others.

Conclusion

With that, we’re done! You should now be able to implement an avatar-creation feature in your React application. To learn more about this library, you can check out the repository on GitHub here.