How to show user image along with input field in ReactJS?
Last Updated :
25 Jul, 2024
We can show the user image along with the input field in React JS. It is like adding an icon image inside the input field. This feature can also be seen on many website login screens. Material UI for React has this component available for us and it is very easy to integrate. We can use the InputAdornment Component in ReactJS using the following approach.
Prerequisites
Approaches to show user image along with input field in React JS are as follows.
Creating React Application
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Project Structure
It will look like the following.
Project StructureWe can use the image before the text input field and use the css for margin and alignment to show the user image along with the input field in react.
Example: Using image before input component and styling using css for the required output.
CSS
/* Filename - App.css */
.App {
text-align: center;
margin: auto;
width: 50rem;
}
.geeks {
color: green;
}
.container {
display: flex;
align-items: center;
text-align: center;
margin: auto;
width: 17rem;
}
.user-img {
width: 30px;
height: 30px;
margin-right: 8px;
border-radius: 15px;
}
.input {
padding: 8px;
font-size: 16px;
}
// Filename - App.js
import "./App.css";
import { useState } from "react";
function App() {
const [inputValue, setInputValue] = useState("");
const userIcon =
"https://media.geeksforgeeks.org/wp-content/uploads/20200716222246/Path-219.png";
const handleChange = (e) => {
setInputValue(e.target.value);
};
return (
<div className="App">
<h1 className="geeks">GeeksforGeeks</h1>
<h3>
React Example for User icon with the input
field
</h3>
<div className="container">
<img
src={userIcon}
alt="User"
className="user-img"
/>
<input
type="text"
placeholder="Enter your username"
value={inputValue}
onChange={handleChange}
className="input"
/>
</div>
</div>
);
}
export default App;
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output
Approach 2: using MUI with react
Material UI with react provide the components that can be used as the input icons to show the user image along with the input field.
Steps to install Material UI: Use this command to in the termanal window in project directory
npm install @material-ui/core
Dependencies list after installion mui:
{
"dependencies": {
"@material-ui/core": "^4.12.4",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
}App.js: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
JavaScript
// Filename - App.js
import React from "react";
import Input from "@material-ui/core/Input";
import InputAdornment from "@material-ui/core/InputAdornment";
const App = () => {
return (
<div
style={{
marginLeft: "30%",
}}
>
<h4>
How to show User Image along with the input
field in ReactJS?
</h4>
<Input
id="input-with-icon-adornment"
style={{
padding: 20,
}}
startAdornment={
<InputAdornment position="start">
<img
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200716222246/Path-219.png"
style={{
height: 50,
width: 50,
borderRadius: "50%",
border: "1px solid grey",
}}
/>
</InputAdornment>
}
/>
</div>
);
};
export default App;
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Similar Reads
How to use imgur to host images in ReactsJS ?
Imgur is primarily used as an image-sharing service, where users post content through an interface provided by the company, just like Facebook or Instagram. But we can also post images to Imgur by accessing their APIs. So, in this article, we will discuss how to upload images to Imgur in React witho
2 min read
How to zoom-in and zoom-out image using ReactJS?
React is a JavaScript library for building user interfaces. React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. In ReactJS whatever we write that look
2 min read
How To Get The Height And Width Of An Image Using ReactJS?
When building web applications, dynamically handling images and their dimensions is a common requirement. In ReactJS, determining the dimensions of an image (i.e., its height and width) can be useful for responsive design, image manipulation, and other dynamic operations. This article will guide you
4 min read
How to set a Background Image With React Inline Styles ?
Setting a background image with React inline style is a straightforward method of using the images as background to enhance the UI of the wen application.How to Set Background Image in React ?To set background image with react inline styles we will be using the style attribute. This style attribute
2 min read
How to Upload Image and Preview it Using ReactJS?
In React, uploading and previewing images improve the user experience of the application. It's typical for online apps to provide image upload capability that enables users to choose and upload photographs. We simply upload a photo from our local device to our React Project and preview it using a st
2 min read
How to set Background Image in react-native ?
In this article, we will see how to set background Image in react-native. In our project, we will simply set a background image and show a text input on top of it. Setting background images requires using the ImageBackground component in React Native. You can style it further to adapt to different s
5 min read
How to Set Background Images in ReactJS
Setting the background images in React improves the UI and user experience of web apps by making the appearance better. These images can be some shape or shade using color gradients. In this tutorial, we will look at different methods to apply background images to your react application. How to Set
4 min read
How to create Image Slider in ReactJS ?
Image Slider is a dynamic web element that displays a collection of images and has a slider to switch between the Images. It is the most common feature to show image collection in web applications or mobile apps.Websites like Amazon.com, Flipkart.com, and many e-commerce sites use image sliders to s
4 min read
How to show and hide Password in ReactJS?
To show and hide passwords in React JS we can simply use the password input with an input to select the show and hide state. The user might need to see what has he used as the password to verify which is an important concept in login and registration forms. We can create this type of password input
3 min read
How to put author/title name over image in ReactJS?
We can place the author or title name over the image using the GridListTileBar Component in ReactJS. This component adds an overlay over the child component. Material UI for React has this component available for us and it is very easy to integrate. We can use the GridListTileBar component in ReactJ
2 min read