@aniruddha1806/password

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