Imagine that your next request is to perform this function: If the user does not have a profile image, the system must take their name and create an image from their initials in the purest Google style.

You say it is possible, but you still have no idea how. And so you ended up here…

---

What Is a Letter Picture?

									Gmail letter picture

When a Google service cannot find a photo of your profile, it will take your initials and create a small representative image of your profile. It’s a very pleasant practice for the user experience.

---

Let’s Start

Project structure

We will work on the app component. We will create a component called utilities that will contain all the functions that we will need to create the image.

import React from "react";
	import "./app.scss";
	import {getRandomColor,createImageFromInitials} from './Components/Utils'
	function App() {
		let name = "Jhon Smith";
		let imgSrc = "";

		return (
			<div>
				<img
					id='preview'
					src={
						imgSrc.length <= 0
							? createImageFromInitials(500, name, getRandomColor())
							: imgSrc
					}
					alt='profile-pic'
				/>
			</div>
		);
	}

	export default App;

App.js

Our app will be quite simple in that we will export the two functions that we will need. An image where your src is will have a conditional. If the src field is empty, we will call our function to generate an image with the initials. Otherwise, the src will be the image that we bring from the database.

#javascript #react #reactjs #nodejs #programming #react