ViraStack Password: Erişilebilir Şifre Görünürlüğü

Şifre alanında "göster / gizle" neredeyse standart bir beklenti; çoğu ekip bunu bir önceki projeden kopyalar veya birkaç satırlık useState ile çözer. Sorun görünürlük state'inin kendisi değil: ekran okuyucuya durumu bildirmemek, formu yanlışlıkla submit eden bir düğme, disabled input varken hâlâ tıklanabilen bir göz ikonu. Bunlar canlıda geç fark edilir hatalar. Asistanla sıfırdan ürettirmek de mümkün; fakat her seferinde aynı erişilebilirlik checklist'ini yeniden tarif etmek ve çıktıyı elle doğrulamak zorunda kalırsınız. Ortak, belgelenmiş bir hook bu tekrarı kısaltır.

ViraStack Password (@virastack/password) tam bu noktada devreye giriyor. Headless bir hook: inputProps ve btnProps verir, stil ve markup size kalır. Varsayılan göz ikonlarıyla hemen çalışır; isterseniz metin etiketine veya kendi ikonlarınıza geçersiniz.

Ne Yapıyor?

ViraStack Password, şifre görünürlüğünü yönetir. useViraPassword görünürlük state'ini tutar, input type'ını senkronlar ve toggle düğmesine ARIA özniteliklerini ekler. disabled / readOnly durumunda düğme de kilitlenir. Prop birleştirme sayesinde kendi className, autoComplete veya olay işleyicileriniz hook çıktısının üzerine güvenle eklenir.

Şifre görünürlüğü örneği

Aşağıda iki yaygın kullanım var: varsayılan ikonlu toggle ve Göster / Gizle metin etiketli sürüm. Durum satırından görünürlüğün nasıl değiştiğini izleyebilirsiniz.

Nasıl kullanılır?

npm install @virastack/password

import { useViraPassword } from "@virastack/password"
 
function Example() {
  const { inputProps, btnProps } = useViraPassword()
 
  return (
    <div className="relative">
      <input {...inputProps} placeholder="Şifrenizi girin" />
      <button {...btnProps} />
    </div>
  )
}

Metin etiketli sürüm için icons seçeneği yeterlidir:

const { inputProps, btnProps } = useViraPassword({
  icons: {
    show: "Göster",
    hide: "Gizle"
  }
})

Aynı hook ile özel ikonlar, disabled / readOnly senkronu veya programatik toggle() / setVisible() da kullanılabilir. shadcn, Ant Design veya Chakra gibi UI kütüphanelerine props yayarak bağlanır - ekstra bir form framework zorunluluğu yoktur.

Kurulum, API ve canlı örnekler için virastack.com/password adresine, örnekler listesine buradan, kaynak kod için github.com/virastack/password deposuna bakabilirsiniz.

ViraStack ürünleri açık kaynak ve ücretsiz. Destek olmak isterseniz GitHub üzerinde bir yıldız bırakabilirsiniz - ekosistemin daha çok kişiye ulaşmasına yardımcı olur.