@aniruddha1806/password v1.0.1

React Password Input

A comprehensive, customizable password input component for React applications with real-time validation, strength meter, and security features. Built with TypeScript and zero dependencies.

Installation

npm install @aniruddha1806/password

Features

• 🔒 Real-time password strength validation
• 👁️ Toggle password visibility
• 📋 Copy to clipboard functionality
• 📊 Visual strength meter with progress bar
• ✅ Customizable validation requirements
• 🎨 Fully customizable styling
• ♿ Accessibility features with ARIA labels
• 🔧 TypeScript support with full type definitions
• 📱 Responsive design
• 🪶 Zero dependencies and lightweight

Quick Start

import { PasswordInput } from '@aniruddha1806/password';

function App() {
  const handlePasswordChange = (password) => {
    console.log('Password:', password);
  };

  return (
    <div style={{ padding: '20px', maxWidth: '400px' }}>
      <PasswordInput
        label="Create Password"
        placeholder="Enter a strong password"
        onChange={handlePasswordChange}
      />
    </div>
  );
}

Props

requiredChars Object

Examples

Basic Usage

Simple password input with default settings:

import { PasswordInput } from '@aniruddha1806/password';

function BasicExample() {
  return (
    <div style={{ padding: '20px', maxWidth: '400px' }}>
      <PasswordInput
        label="Password"
        placeholder="Enter your password"
        onChange={(password) => console.log(password)}
      />
    </div>
  );
}

Custom Validation Requirements

Customize which character types are required:

import { PasswordInput } from '@aniruddha1806/password';

function CustomValidationExample() {
  return (
    <div style={{ padding: '20px', maxWidth: '400px' }}>
      <PasswordInput
        label="Simple Password"
        minLength={6}
        requiredChars={{
          uppercase: false,
          lowercase: true,
          number: true,
          special: false
        }}
        placeholder="At least 6 characters with numbers"
        onChange={(password) => console.log(password)}
      />
    </div>
  );
}

Custom Styled Password Input

Apply custom styling to match your design system:

import { PasswordInput } from '@aniruddha1806/password';

function CustomStyledExample() {
  return (
    <div style={{ padding: '20px', maxWidth: '500px' }}>
      <PasswordInput
        label="Create Your Password"
        placeholder="Make it strong and unique"
        className="custom-password-container"
        labelClassName="custom-label"
        inputClassName="custom-input"
        helpTextClassName="custom-help"
        onChange={(password) => console.log(password)}
      />

      <style jsx>{`
        .custom-password-container {
          margin-bottom: 24px;
        }
        
        .custom-label {
          color: #1f2937 !important;
          font-size: 16px !important;
          font-weight: 600 !important;
          margin-bottom: 8px !important;
        }
        
        .custom-input {
          padding: 16px 60px 16px 16px !important;
          border: 2px solid #e5e7eb !important;
          border-radius: 12px !important;
          font-size: 16px !important;
          background-color: #f9fafb !important;
        }
        
        .custom-input:focus {
          border-color: #8b5cf6 !important;
          box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1) !important;
          background-color: #ffffff !important;
        }
        
        .custom-help {
          background-color: #f3f4f6;
          padding: 12px;
          border-radius: 8px;
          margin-top: 8px !important;
        }
      `}</style>
    </div>
  );
}

TypeScript Usage

The component provides full TypeScript support:

import { PasswordInput, PasswordInputProps } from '@aniruddha1806/password';

interface FormData {
  email: string;
  password: string;
}

const SignupForm: React.FC = () => {
  const [formData, setFormData] = useState<FormData>({
    email: '',
    password: ''
  });

  const handlePasswordChange = (password: string): void => {
    setFormData(prev => ({ ...prev, password }));
  };

  const passwordProps: PasswordInputProps = {
    label: "Create Password",
    minLength: 10,
    requiredChars: {
      uppercase: true,
      lowercase: true,
      number: true,
      special: true
    },
    onChange: handlePasswordChange
  };

  return (
    <form>
      <PasswordInput {...passwordProps} />
    </form>
  );
};