@omergulcicek/password-input v1.2.0

@omergulcicek/password-input

React hook that adds show/hide toggle to password inputs.

🚀 Live Demo

Try the interactive demo: omergulcicek-password-input.vercel.app

See password input with show/hide toggle functionality in action.

Installation

npm install @omergulcicek/password-input

Features

✅ Password Toggle: Show/hide password functionality with custom icons
✅ Custom Icons: Support for any React components as icons
✅ TypeScript Support: Full type safety
✅ Customizable Styling: Custom class names and styling options
✅ Accessible: Proper ARIA labels and keyboard support
✅ Flexible: Works with any CSS framework or custom styles

Basic Usage

import { usePasswordInput } from "@omergulcicek/password-input"

const { inputProps, InputWrapper, wrapperProps } = usePasswordInput({
  password: true
});

return (
  <InputWrapper {...wrapperProps}>
    <input {...inputProps} />
  </InputWrapper>
)

Custom Icons and Text

You can customize the show/hide icons with any React component:

import { usePasswordInput } from "@omergulcicek/password-input"

const { inputProps, InputWrapper, wrapperProps } = usePasswordInput({
  password: {
    icons: {
      show: <span className="text-xs">Show</span>,
      hide: <span className="text-xs">Hide</span>,
    }
  }
});

return (
  <InputWrapper {...wrapperProps}>
    <input {...inputProps} />
  </InputWrapper>
)

With Lucide React Icons

import { usePasswordInput } from "@omergulcicek/password-input"
import { House, Star } from "lucide-react"

const { inputProps, InputWrapper, wrapperProps } = usePasswordInput({
  password: {
    icons: {
      show: <House className="size-4" />,
      hide: <Star className="size-4" />,
    }
  }
});

return (
  <InputWrapper {...wrapperProps}>
    <input {...inputProps} />
  </InputWrapper>
)

Custom Styling

import { usePasswordInput } from "@omergulcicek/password-input"

const { inputProps, InputWrapper, wrapperProps } = usePasswordInput({
  password: true,
  classNames: {
    wrapper: "my-custom-wrapper", // outer container div
    suffix: "my-custom-suffix",     // right-side icon container
    button: "my-custom-button"    // toggle button element
  }
});

return (
  <InputWrapper {...wrapperProps}>
    <input {...inputProps} />
  </InputWrapper>
)

With Class Name Utility (clsx, cn, etc.)

import { usePasswordInput } from "@omergulcicek/password-input"
import { cn } from "@/lib/utils" // your class name utility

const { inputProps, InputWrapper, wrapperProps } = usePasswordInput({
  password: true,
  classNames: {
    wrapper: "my-custom-wrapper",
    suffix: "my-custom-suffix", 
    button: "my-custom-button"
  },
  cn // optional
});

return (
  <InputWrapper {...wrapperProps} className="border rounded-md">
    <input {...inputProps} className="px-3 py-2 w-full" />
  </InputWrapper>
)

Note: The cn parameter is optional. If not provided, the component will work perfectly but conflicting Tailwind classes may not be resolved (e.g., p-1 and p-2 both remain in the output). Using a class name utility like clsx, cn, or twMerge ensures proper class merging and conflict resolution.

API Reference

usePasswordInput Options

PasswordConfig

Return Values

Key Benefits

✅ Zero Configuration: Works out of the box with sensible defaults
✅ Highly Customizable: Every aspect can be customized
✅ Framework Agnostic: Works with any CSS framework
✅ Lightweight: Minimal bundle size impact
✅ TypeScript First: Built with TypeScript for the best DX

Credits

Default icons are adapted from Lucide (ISC License)