ViraStack Password Toggle

Fully accessible and customizable password visibility hook for React.

• ♿ Accessibility First: Fully ARIA compliant out of the box for better screen reader support.
• 🧩 Framework Agnostic: Logic is separated from React state, making it adaptable and clean.
• 🎨 Smart Defaults: Includes minimal SVG icons by default, so you can start using it immediately.
• 🔄 Prop Merging: Safely merges user props with hook-generated props to prevent overrides.
• 🔒 State Sync: Automatically handles disabled and readOnly states for a consistent UX.

Read the docs →

Quick Start

npm install @virastack/password-toggle

import { useViraPassword } from '@virastack/password-toggle';

function App() {
  const { inputProps, btnProps } = useViraPassword();

  return (
    <div>
      <input {...inputProps} placeholder="Enter password" />
      <button {...btnProps} />
    </div>
  );
}

Explore the ViraStack Ecosystem

• AI Rules – Standardized AI rules for consistent code generation
• Next.js Boilerplate – Full-featured, scalable Next.js starter kit
• Input Mask – Lightweight, zero-dependency input masking library
• Password Toggle – Accessible, headless password visibility component
• Modern Web in 3 Mins – Learn the standards of modern web development in 3 minutes.

... and more at virastack.com

License

Licensed under the MIT License.

Maintainer

A project by Ömer Gülçiçek