React Animated Login Form

A React component for a login form with animated button shifting and validation.

Installation

npm install react-animated-login-form-nhin
# or
yarn add react-animated-login-form-nhin

Features

• Animated login button that shifts position when fields are empty
• Input validation with feedback
• Social login options (Apple, Google, Meta)
• Modern sleek design with dark theme
• Font Awesome integration
• Responsive layout

Usage

import React, { useRef } from "react";
import { LoginForm } from "react-animated-login-form-nhin";

function App() {
  const username = useRef(null);
  const pass = useRef(null);

  const shiftButton = () => {
    const btn = document.querySelector("#login-btn");
    const positions = [
      "shift-left",
      "shift-top",
      "shift-right",
      "shift-bottom",
    ];
    const currentPosition = positions.find((dir) =>
      btn.classList.contains(dir)
    );
    const nextPosition =
      positions[(positions.indexOf(currentPosition) + 1) % positions.length];
    if (!username.current.value || !pass.current.value) {
      btn.classList.remove(currentPosition);
      btn.classList.add(nextPosition);
    }
  };

  const handleInput = () => {
    const btn = document.querySelector("#login-btn");
    const msg = document.querySelector(".msg");

    if (!username.current.value || !pass.current.value) {
      btn.disabled = true;
      msg.style.color = "rgb(218 49 49)";
      msg.innerText = "Please fill the input fields before proceeding";
    } else {
      msg.innerText = "Great! Now you can proceed";
      msg.style.color = "#92ff92";
      btn.disabled = false;
    }
  };

  return (
    <LoginForm
      username={username}
      pass={pass}
      handleInput={handleInput}
      shiftButton={shiftButton}
    />
  );
}

export default App;

Props

| Prop | Type | Description | | ----------- | --------- | ----------------------------------------------------- | | username | RefObject | Reference to the username input field | | pass | RefObject | Reference to the password input field | | handleInput | Function | Handler for input events to validate the form | | shiftButton | Function | Handler for mouse events to shift the button position |

CSS Customization

The component comes with default styling. To customize the appearance, you can override the CSS classes in your own stylesheet.

License

MIT