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.
To follow along perfectly with this article, you should have a basic understanding of React and JavaScript.
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.
Avatar
componentThe 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.
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.
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.
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.
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.
Install LogRocket via npm or script tag. LogRocket.init()
must be called client-side, not
server-side
$ npm i --save logrocket // Code: import LogRocket from 'logrocket'; LogRocket.init('app/id');
// Add to your HTML: <script src="https://cdn.lr-ingest.com/LogRocket.min.js"></script> <script>window.LogRocket && window.LogRocket.init('app/id');</script>
Hey there, want to help make our blog better?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up nowSOLID principles help us keep code flexible. In this article, we’ll examine all of those principles and their implementation using JavaScript.
JavaScript’s Date API has many limitations. Explore alternative libraries like Moment.js, date-fns, and the new Temporal API.
Explore use cases for using npm vs. npx such as long-term dependency management or temporary tasks and running packages on the fly.
Validating and auditing AI-generated code reduces code errors and ensures that code is compliant.