ViraStack
  • Akademi
  • Hakkında
  • Destek
Genel BakışBaşlangıçÖrnekler
ViraStack

Frontend ekosistemi: ücretsiz rehberler, proje şablonları, AI kuralları ve form bileşenleri.

Ürünler

  • ViraStack Start
  • ViraStack AI
  • ViraStack Mask
  • ViraStack Password
  • ViraStack Guide

Keşfet

  • Akademi
  • Hakkında
  • Marka
  • Destek

© 2026 ViraStack.

Açık kaynak · MIT

Örnekler

  • Tümü
  • Basit
  • Disabled / readOnly
  • Göster / gizle
  • Güç göstergesi
  • Kişisel bilgi
  • Mask ile kayıt
  • Özel ikonlar
  • Özel metin
  • Parola tekrarı
  • Programatik
  • Prop merge
  • React Hook Form + Zod
  • Server Action
  • Sızmış parolalar

Göster / gizle

Odak yönetimi, gönderimde gizleme ve Caps Lock uyarısıyla toggle.

← Tüm örnekler·show-hide

Önizleme

// components/password-field.tsx
"use client";
 
import { useViraPassword } from "@virastack/password";
 
export function PasswordField() {
  const { inputProps, btnProps, capsLock } = useViraPassword();
 
  return (
    <>
      <label htmlFor={inputProps.id}>Password</label>
      <div>
        <input {...inputProps} placeholder="Your password" />
        <button {...btnProps} />
      </div>
      {capsLock && <p>Caps Lock is on</p>}
    </>
  );
}

Detaylar

  • Fareyle tıklayınca odak input'a döner; Enter veya Space ile butonda kalır.
  • Form gönderilince parola yeniden gizlenir.
  • capsLock, input odaktayken Caps Lock açıksa true olur.

Hook API için useViraPassword(), stil ve ikonlar için customization.

ÖncekiDisabled / readOnlySonrakiGüç göstergesi

Bu sayfada

  • Önizleme
  • Detaylar
Hata mı var? Düzeltin