React Show / Hide Password Eye Toggle with React Hook Tutorial

In this handy guide, you will learn how to create a password show / hide toggle button in React app using React useState hook.

We will use the bootstrap library and SVG icons in a React functional component to build the show and hide password eye toggle button.

The useState hook allows tracking the state of the password input field along with a toggle show and hides button.

A toggle hide and show button helps you turn on and off the password visibility. It is a button with an eye symbol, generally placed in the password input field towards the rightmost part.

The password show, hide toggle button in React, or any other applications help to hide and unhide the password.

Let’s check out how to create a feature that shows and hides the password in React with the functional component. This guide will surely help you understand the concept.

We have defined everything step by step; make sure to follow everything precisely.

How to Create Password Show / Hide Eye Toggle in React with Bootstrap

  • Step 1: Download React Project
  • Step 2: Create Component File
  • Step 3: Set Up Bootstrap Library
  • Step 4: Build Password Show / Hide Toggle
  • Step 5: Add Form Component to App.js
  • Step 6: Start React Server

Download React Project

Head over terminal app, open the console screen than type and simultaneously execute the command to create a new React application.

npx create-react-app react_demo

Move inside the project folder.

cd react_demo

Create Component File

Next, you have to land inside the src folder.

Now, make sure to create the features directory, next make the functional component using the given code, name the file PasswordForm.js.

import React from 'react'

function PasswordForm() {
  return (
    <div> </div>
  )
}

export default PasswordForm

Set Up Bootstrap Library

Bootstrap is mainly taken in consideration for developing swift UI development. You can use it, if you want. To install bootstrap in React run the given command.

npm install bootstrap

Next, you have to go to App.js file. Here, you have to import the bootstrap CSS path, like we have imported below.

import React from "react";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import PasswordForm from "./features/PasswordForm";

function App() {
  return (
    <div className="container mt-5">

    </div>
  );
}

export default App;

Build Password Show / Hide Toggle

Now comes the main pat of this tutorial, without wasting much time, open the features/PasswordForm.js file, and copy the given code and paste it into the file.

import React, { useState } from "react";

function PasswordForm() {
  const [password, initPassword] = useState("password");
  const [pwdField, setPwdField] = useState("");

  const onChange = (e) => {
    setPwdField(e.target.value);
  };
  const hideShowPassword = () => {
    if (password === "password") {
      initPassword("text");
      return;
    }
    initPassword("password");
  };
  return (
    <div>
      <div className="input-group mb-3">
        <input
          type={password}
          onChange={onChange}
          value={pwdField}
          name="password"
          className="form-control"
          placeholder="Password"
        />
        <button className="btn btn-outline-danger" onClick={hideShowPassword}>
          {password === "password" ? (
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              fill="currentColor"
              className="bi bi-eye-slash-fill"
              viewBox="0 0 16 16"
            >
              <path d="m10.79 12.912-1.614-1.615a3.5 3.5 0 0 1-4.474-4.474l-2.06-2.06C.938 6.278 0 8 0 8s3 5.5 8 5.5a7.029 7.029 0 0 0 2.79-.588zM5.21 3.088A7.028 7.028 0 0 1 8 2.5c5 0 8 5.5 8 5.5s-.939 1.721-2.641 3.238l-2.062-2.062a3.5 3.5 0 0 0-4.474-4.474L5.21 3.089z" />
              <path d="M5.525 7.646a2.5 2.5 0 0 0 2.829 2.829l-2.83-2.829zm4.95.708-2.829-2.83a2.5 2.5 0 0 1 2.829 2.829zm3.171 6-12-12 .708-.708 12 12-.708.708z" />
            </svg>
          ) : (
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              fill="currentColor"
              className="bi bi-eye-fill"
              viewBox="0 0 16 16"
            >
              <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z" />
              <path d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z" />
            </svg>
          )}
        </button>
      </div>
    </div>
  );
}

export default PasswordForm;

Add PasswordForm Component to App.js

Last task is to add the PasswordForm component to App.js file, you can do it by adding the suggested code.

This way the component we created to show and hide password will be available throughout our React app.

import React from "react";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import PasswordForm from "./features/PasswordForm";

function App() {
  return (
    <div className="container mt-5">
      <h2>React Hide and Show Password Toggle Example</h2>
      <PasswordForm />
    </div>
  );
}

export default App;

Start React Server

One more time, use the given command and hit enter to run the React development server.

npm start

Here is how you can start the app on the browser.

http://localhost:3000

React Show / Hide Password Eye Toggle with React Hook Tutorial

Conclusion

In this tutorial, we learned how to create and add the Toggle password visibility button in React application.

We used the functional component, bootstrap library, and React hooks to build the Hide/Show password using the eye symbol in React.