6 step to make password Show/ Hide Toggle Button in React

6 step to produce password Show/ Hide Toggle Button in React The password input field is an essential part of the form in web development. It helps in furnishing a secure way to enter the password of the stoner.

When a stoner creates a password, It shouldn’t be seen easily. By keeping this in mind, we created this tutorial.

This composition will explain how to produce a show and hide password eye toggle button in React JS using the useState hook in the functional element with Bootstrap 5.

We'll use the Bootstrap library to design the Hide/ Show password toggle button in the form input control. Bootstrap is a CSS frame simply used to produce UI factors.

💡

Create password Show and Hide Eye Toggle Button

This post will educate you how to install and configure the Bootstrap package in React and produce a password show/ hide eye toggle button with utmost perfection.

after the previous articles we have learned a little about:

First: Create React Application

still, go ahead and use the suggested command to form a new React operation, If you have installed Node and NPM.

npx create-react-app react-form

We've downloaded the new app, and now get into the app folder.

cd react-form

Second: MakeComponent File

You have to make the factors in the src folder. To produce the password toggle show hide button, produce the Form.js serve element train.

import React from 'react'
function Form() {
  return (
    <div>Form page</div>
  )
}
export default Form

Third: Add Bootstrap Package

To install the bootstrap library you have to execute the suggested command using the npm.

npm install bootstrap

Now, open the theApp.js element, then you have to add the thebootstrap.min.css train path.

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

Fourth: MakeShow/ Hide password Toggle Button

In this step, you have to open the factors password Form.js train and also put the suggested law into the train.

Fifth: Update the App element

import React from "react";
function Form() {
  const [password, setPasswordValue] = React.useState("password");
  const [passwordInput, setPasswordInput] = React.useState("");
  const onPasswordChange = (e) => {
    setPasswordInput(e.target.value);
  };
  const toggle = () => {
    if (password === "password") {
      setPasswordValue("text");
      return;
    }
    setPasswordValue("password");
  };
  return (
    <div>
      <div className="input-group">
        <input
          type={password}
          onChange={onPasswordChange}
          value={passwordInput}
          placeholder="Enter password"
          name="password"
          className="form-control"
        />
        <button className="btn btn-primary" onClick={toggle}>
          {password === "password" ? (
            <svg
              width="20"
              height="17"
              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
              width="20"
              height="17"
              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 Form;

Incipiently, get into the App.js element then we bear to import the Form element as given below.

import React from "react";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import Form from "./components/Form";
function App() {
  return (
    <div>
      <Form />
    </div>
  );
}
export default App;

Sixth: View App on Browser

We'll now start the application server.

npm start

http://localhost:3000

Finished.

💡