using MUI with react

Approach 1: Using image and input copmonent

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.w3wiki.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:

How to show user image along with input field in ReactJS?

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.

Tags:

#React-Questions #ReactJS #Web Technologies

Approach 1: Using image and input copmonent

using MUI with react

Javascript

How to show user image along with input field in ReactJS?

Similar Reads