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

Projects

• Next.js Boilerplate - Production-ready Next.js 16+ starter template built with Tailwind CSS 4 and TypeScript.
• AI Rules - AI-native architecture kit and high-discipline protocols for modern React applications.
• Input Mask - Lightweight, zero-dependency input masking library optimized for React Hook Form.
• Password Toggle - Fully accessible and highly customizable password visibility hook for React.
• Modern Web in 3 Minutes - Master modern web development standards in just 3 minutes.

🚧 Coming Soon

• Start (CLI) - Automated scaffolding tool to initialize and scale high-discipline ViraStack architectures.
• TanStack Boilerplate - Production-ready TanStack Start starter template built with Tailwind CSS 4 and TypeScript.
• Standards - A unified suite of ESLint, Prettier, and architectural rules to enforce absolute code integrity.
• Error Guard - Pro-grade error handling and smart recovery protocols for zero-friction React environments.

... and more at virastack.com

License

Licensed under the MIT License.

Maintainer

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