react-fatless-form
Version:
A lightweight React form package designed for simplicity that simplifies form handling and validation without unnecessary complexity or bloat.
56 lines (55 loc) • 1.97 kB
TypeScript
import React from "react";
export type PasswordInputProps = {
name: string;
value: string;
onChange: (value: string) => void;
passwordPolicy?: (password: string) => {
strength: number;
message: string;
};
label: string;
showStrengthIndicator?: boolean;
showIcon?: React.ReactNode;
hideIcon?: React.ReactNode;
className?: string;
style?: React.CSSProperties;
disabled?: boolean;
};
/**
* PasswordInput Component
*
* A controlled password input field with a visibility toggle and an optional strength indicator.
* Supports a custom password policy function for validation.
* Uses CSS Modules for styling.
*
* @param {Object} props - Component properties
* @param {string} props.value - The current password value
* @param {Function} props.onChange - Function to update the password value
* @param {(password: string) => { strength: number; message: string }} [props.passwordPolicy] - Custom password policy function
* @param {boolean} [props.showStrengthIndicator=true] - Whether to show the strength indicator
* @param {ReactNode} [props.showIcon] - Icon for showing the password
* @param {ReactNode} [props.hideIcon] - Icon for hiding the password
* @param {string} [props.className] - Additional CSS classes
*
* @example
* import { useState } from 'react';
* import PasswordInput from './PasswordInput';
* import { Eye, EyeOff } from 'lucide-react';
*
* function App() {
* const [password, setPassword] = useState('');
* return (
* <PasswordInput
* value={password}
* onChange={setPassword}
* showIcon={<Eye size={18} />}
* hideIcon={<EyeOff size={18} />}
* />
* );
* }
*
* export default App;
*/
export declare function PasswordInput({ value, onChange, passwordPolicy, showStrengthIndicator, showIcon, hideIcon, className, label, style, error, disabled, ...rest }: PasswordInputProps & {
error?: string;
}): React.JSX.Element;