How to Create an Animated Toggle Password Field in React

When building user interfaces in React, providing an editable password field with the ability to toggle between hiding and showing the password is a common and user-friendly feature. This blog will guide you through the process of creating such a component using React and Tailwind CSS.

Step-by-Step Guide

1. Setting Up Your React Project

First, ensure you have a React project set up. You can use Create React App to quickly set up a new project:

2. Creating the Password Toggle Component

Open your App.js file and replace its content with the following code:

import React, { useState, useRef, useEffect } from "react";
import catHide from "./assets/CatHide.mp4";

const App = () => {
  const [passwordVisible, setPasswordVisible] = useState(false);
  const videoRef = useRef(null);

  const toggleView = () => {
    setPasswordVisible(!passwordVisible);
  };

  useEffect(() => {
    if (videoRef.current) {
      if (passwordVisible) {
        videoRef.current.play();

        // Pause the video after 1 second
        setTimeout(() => {
          videoRef.current.pause();
        }, 1000);
      } else {
        videoRef.current.play();
      }
    }
  }, [passwordVisible]);

  return (
    <div className="h-screen flex flex-col items-center">
      <div className="relative">
        <video ref={videoRef} src={catHide} className="rounded-lg w-[20rem] mb-20" />
      </div>
      <div className="flex justify-center items-center bg-indigo-500 text-white rounded-lg space-x-2 px-2">
          <input
            type={passwordVisible ? "text" : "password"}
            placeholder="Password"
            className="w-72 px-3 py-2 rounded-lg bg-transparent focus:outline-none"
          />
          <span
            className="material-symbols-outlined cursor-pointer"
            onClick={toggleView}
          >
            {passwordVisible ? "visibility" : "visibility_off"}
          </span>
        </div>
    </div>
  );
};

export default App;

State Management

const [passwordVisible, setPasswordVisible] = useState(false);

passwordVisible: This state variable manages whether the password input field should display the password text (true) or hide it behind dots (false).

Ref for Video Element

const videoRef = useRef(null);

Toggle Visibility Function

const toggleView = () => {
  setPasswordVisible(!passwordVisible);
};

toggleView Function: This function toggles the passwordVisible state when the visibility icon (represented by a material icon) is clicked. If the password is currently visible, clicking the icon hides it (switches passwordVisible to false), and vice versa.

Effect for Video Playback Control

useEffect(() => {
  if (videoRef.current) {
    if (passwordVisible) {
      videoRef.current.play();

      // Pause the video after 1 second
      setTimeout(() => {
        videoRef.current.pause();
      }, 1000);
    } else {
      videoRef.current.play();
    }
  }
}, [passwordVisible]);

useEffect Hook: This effect runs whenever passwordVisible changes. It controls the video playback based on whether the password is visible or hidden:

• When passwordVisible is true (password is visible), the hiding cat video (CatHide.mp4) starts playing. It pauses after 1 second to add a playful interaction.

• When passwordVisible is false (password is hidden), the video plays again immediately.

Conclusion

This React component integrates a practical password visibility toggle feature with a playful animation, enhancing both usability and user engagement. The useRef hook is utilized to control the video playback, and useState manages the visibility state seamlessly. By understanding these functionalities, developers can extend and customize this component to fit various application requirements, ensuring a secure yet user-friendly login experience.