Login Hover

A React component that provides a login form with a hover effect on the login button.

Installation

npm install login-hover
# or
yarn add login-hover

Usage

import React from "react";
// Import component và CSS
import { Login } from "login-hover";
import "login-hover/dist/login-hover.css"; // Important: Don't forget to import the CSS

function App() {
  const handleLogin = (credentials) => {
    // Handle login with credentials.username and credentials.password
    console.log("Login with:", credentials);
  };

  return (
    <div className="app">
      <Login onSubmit={handleLogin} />
    </div>
  );
}

export default App;

Troubleshooting

If you're having issues:

1. Make sure you imported the CSS file: import "login-hover/dist/login-hover.css"
2. Check that you're using the correct import: import { Login } from "login-hover"
3. Make sure you're providing the onSubmit prop to handle login submissions
4. If using TypeScript, you might need to add "moduleResolution": "node" in your tsconfig.json
5. Make sure your React version is compatible (16.8.0 or higher)

Features

• Clean and modern login UI
• Button that moves away when hovered if fields are empty
• Social login buttons for Apple, Google, and Meta
• Fully customizable via CSS

License

MIT