Show and hide password in React

Today we are going to show you how to manage a show and hide password in React. In this short article, we’ll add the input password field to manage the show or hide functionality in ReactJS.

Here, we’ll not use any npm package to manage the show/hide password functionality.

Steps to show and hide password in React

Create a react app
Add password field in component
Implement show/hide password functionality
Output

1. Create a react app

Let’s create a startup react application using the `create-react-app` npm package. Run the following command to create a react application.

npx create-react-app show-hide-password-react

2. Add password field in component

Now, Let’s design an input password field in the react component. We’ll also add the show/hide image icon to manage the functionality.

App.js

import React, { useState } from 'react';
import showPwdImg from './show-password.svg';
import hidePwdImg from './hide-password.svg';

function App() {

  const [pwd, setPwd] = useState('');

  return (
    <div class="App">
      <h3>Show and hide password in React - <a href="https://www.cluemediator.com/" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3>

      <div class="pwd-container">
        <input name="pwd" placeholder="Enter Password" type="password" value={pwd} onchange="{e" ==""> setPwd(e.target.value)} />
        <img title="Show password" src={showPwdImg}>
      </div>

    </div>
  );
}

export default App;

index.css

body {
  margin: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

.pwd-container {
  position: relative;
  width: 295px;
}

.pwd-container input {
  padding: 5px 30px 5px 10px;
  font-size: 20px;
}

.pwd-container img {
  cursor: pointer;
  position: absolute;
  width: 20px;
  right: 8px;
  top: 8px;
}

3. Implement show/hide password functionality

To implement show/hide password functionality, we have to change the input type from `password` to the `text` and for that we will use the state variable. Also change the show/hide password image based on the same state variable.

App.js

import React, { useState } from 'react';
import showPwdImg from './show-password.svg';
import hidePwdImg from './hide-password.svg';

function App() {

  const [pwd, setPwd] = useState('');
  const [isRevealPwd, setIsRevealPwd] = useState(false);

  return (
    <div class="App">
      <h3>Show and hide password in React - <a href="https://www.cluemediator.com/" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3>

      <div class="pwd-container">
        <input name="pwd" placeholder="Enter Password" type="{isRevealPwd" ?="" "text"="" :="" "password"}="" value={pwd} onchange="{e" ==""> setPwd(e.target.value)}
        />
        <img title="{isRevealPwd" ?="" "hide="" password"="" :="" "show="" password"}="" src="{isRevealPwd" hidepwdimg="" showpwdimg}="" onclick="{()" ==""> setIsRevealPwd(prevState => !prevState)}
        />
      </div>

    </div>
  );
}

export default App;

4. Output

Run the react application and check the output in the browser.

Output - Show and hide password in React - Clue Mediator

That’s it for today.
Thank you for reading. Happy Coding..!!

Demo & Source Code

Github Repository StackBlitz Project