@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

| Option | Type | Description | |--------|------|-------------| | password | boolean \| PasswordConfig | Enable password toggle functionality | | classNames | object | Custom class names for wrapper, suffix, and button | | cn | function | Class name utility function (like clsx or cn) |

PasswordConfig

| Option | Type | Description | |--------|------|-------------| | icons.show | React.ReactNode | Custom icon for show password button | | icons.hide | React.ReactNode | Custom icon for hide password button |

Return Values

| Property | Type | Description | |----------|------|-------------| | inputProps | object | Props to spread on your input element | | InputWrapper | Component | Wrapper component for the input | | wrapperProps | object | Props to spread on InputWrapper | | showPassword | boolean | Current password visibility state | | value | string | Current input value | | setValue | function | Function to update input value |

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)