Creating a React Password Input with Eye Icon

Creating a React Password Input with Eye Icon

In this tutorial, we'll walk through the process of creating a password input field in React with an eye icon that allows users to toggle between hiding and revealing the password. This interactive feature enhances the user experience by providing visibility control over the entered password.

Prerequisites

  • Basic knowledge of React
  • Node.js and npm installed on your machine

Step 1: Setting Up a React Project

If you haven't already, create a new React project using Create React App:

npx create-react-app react-password-input
cd react-password-input

Step 2: Create the PasswordInput Component

Inside the src folder, create a new file named PasswordInput.js:

// src/PasswordInput.js
import React, { useState } from 'react';
import { FaEye, FaEyeSlash } from 'react-icons/fa';

const PasswordInput = () => {
  const [showPassword, setShowPassword] = useState(false);

  const togglePasswordVisibility = () => {
    setShowPassword(!showPassword);
  };

  return (
    <div>
      <input
        type={showPassword ? 'text' : 'password'}
        placeholder="Enter your password"
      />
      <button onClick={togglePasswordVisibility}>
        {showPassword ? <FaEyeSlash /> : <FaEye />}
      </button>
    </div>
  );
};

export default PasswordInput;

Step 3: Styling the Component

For simplicity, let's add some basic styling to our component. You can customize it further based on your project's design requirements.

npm install styled-components

Now, update PasswordInput.js to include the styles:

// src/PasswordInput.js
import React, { useState } from 'react';
import styled from 'styled-components';
import { FaEye, FaEyeSlash } from 'react-icons/fa';

const InputWrapper = styled.div`
  position: relative;
`;

const StyledInput = styled.input`
  padding-right: 30px;
`;

const ShowPasswordButton = styled.button`
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
`;

const PasswordInput = () => {
  const [showPassword, setShowPassword] = useState(false);

  const togglePasswordVisibility = () => {
    setShowPassword(!showPassword);
  };

  return (
    <InputWrapper>
      <StyledInput
        type={showPassword ? 'text' : 'password'}
        placeholder="Enter your password"
      />
      <ShowPasswordButton onClick={togglePasswordVisibility}>
        {showPassword ? <FaEyeSlash /> : <FaEye />}
      </ShowPasswordButton>
    </InputWrapper>
  );
};

export default PasswordInput;

Step 4: Using the PasswordInput Component

Now, import and use the PasswordInput component in your main App.js file:

// src/App.js
import React from 'react';
import PasswordInput from './PasswordInput';

const App = () => {
  return (
    <div>
      <h1>React Password Input with Eye</h1>
      <PasswordInput />
    </div>
  );
};

export default App;

Step 5: Testing the Component

Start your React development server:

npm start

Open your browser and navigate to http://localhost:3000 to see your React application with the password input field and eye icon.

Conclusion

In this tutorial, we've created a React password input component with an eye icon that allows users to toggle between hiding and revealing the password. This interactive feature enhances the user experience and provides visibility control over the entered password. Feel free to customize and extend this component further to suit your project's needs. Happy coding!

  • Date: