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

| Prop | Type | Default | Description | |------|------|---------|-------------| | id | string | "password" | HTML id attribute for the input | | name | string | "password" | HTML name attribute for the input | | label | string | "Password" | Label text displayed above the input | | placeholder | string | "Enter your password" | Placeholder text for the input | | defaultValue | string | "" | Initial value of the password input | | required | boolean | true | Whether the field is required | | minLength | number | 8 | Minimum required password length | | requiredChars | object | See below | Character requirements configuration | | onChange | (value: string) => void | undefined | Callback when password changes | | className | string | "" | Additional CSS class for container | | labelClassName | string | "" | Additional CSS class for label | | inputClassName | string | "" | Additional CSS class for input | | errorClassName | string | "" | Additional CSS class for error states | | helpTextClassName | string | "" | Additional CSS class for help text | | disableCopy | boolean | false | Disable the copy to clipboard button |

requiredChars Object

| Property | Type | Default | Description | |----------|------|---------|-------------| | uppercase | boolean | true | Require at least one uppercase letter | | lowercase | boolean | true | Require at least one lowercase letter | | number | boolean | true | Require at least one number | | special | boolean | true | Require at least one special character |

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>
  );
};