Login Register Form

A modern, responsive React component library for login and register forms with beautiful styling.

Features

• 🎨 Modern, clean design with smooth animations
• 📱 Fully responsive
• 🔧 TypeScript support with full type definitions
• ⚡ Lightweight and fast
• 🎯 Easy to customize
• 🔒 Form validation ready

Installation

npm install login-register-form

Usage

Basic Login Form

import React from 'react';
import { LoginForm } from 'login-register-form';
import 'login-register-form/style';

function App() {
  const handleLogin = (username: string, password: string) => {
    console.log('Login attempt:', { username, password });
    // Handle your login logic here
  };

  return (
    <div>
      <LoginForm onLogin={handleLogin} />
    </div>
  );
}

Basic Register Form

import React from 'react';
import { RegisterForm } from 'login-register-form';
import 'login-register-form/style';

function App() {
  const handleRegister = (username: string, password: string, email: string) => {
    console.log('Register attempt:', { username, password, email });
    // Handle your registration logic here
  };

  return (
    <div>
      <RegisterForm onRegister={handleRegister} />
    </div>
  );
}

Using Both Forms

import React, { useState } from 'react';
import { LoginForm, RegisterForm } from 'login-register-form';
import 'login-register-form/style';

function App() {
  const [isLogin, setIsLogin] = useState(true);

  const handleLogin = (username: string, password: string) => {
    console.log('Login:', { username, password });
  };

  const handleRegister = (username: string, password: string, email: string) => {
    console.log('Register:', { username, password, email });
  };

  return (
    <div>
      {isLogin ? (
        <div>
          <LoginForm onLogin={handleLogin} />
          <button onClick={() => setIsLogin(false)}>
            Switch to Register
          </button>
        </div>
      ) : (
        <div>
          <RegisterForm onRegister={handleRegister} />
          <button onClick={() => setIsLogin(true)}>
            Switch to Login
          </button>
        </div>
      )}
    </div>
  );
}

API Reference

LoginForm

A form component for user login.

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | onLogin | (username: string, password: string) => void | No | Callback function called when form is submitted |

RegisterForm

A form component for user registration.

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | onRegister | (username: string, password: string, email: string) => void | No | Callback function called when form is submitted |

Styling

The components come with built-in CSS that provides a modern, clean design. The styles are automatically included when you import the components.

Custom Styling

You can override the default styles by importing the CSS and customizing it:

/* Your custom styles */
.form-container {
  /* Override default styles */
  background: #f8f9fa;
  border-radius: 12px;
}

Development

Prerequisites

• Node.js >= 14
• npm or yarn

Setup

1. Clone the repository
2. Install dependencies:

   npm install

Available Scripts

• npm run dev - Start development server
• npm run build - Build the package
• npm run preview - Preview the built package

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.