VIRASTACKPassword
  • Hakkında
  • Katkı
ViraStack Password

Başlangıç

  • Giriş
  • llms.txt

Kullanım

  • useViraPassword()
  • Accessibility
  • Customization
  • Helpers
  • Types
  • UI kütüphaneleri

Örnekler

  • Tümü
  • Basit
  • Disabled / readOnly
  • Özel ikonlar
  • Özel metin
  • Programatik
  • Prop merge

useViraPassword()

Tek hook ile input type’ını ve görünürlük butonunu yönetin. Props doğrudan spread edilir.

Temel kullanım

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

Options

useViraPassword(options?) isteğe bağlı ayarlar alır:

AlanVarsayılanAçıklama
defaultVisiblefalseBaşlangıç görünürlüğü
iconsEye / EyeOff{ show, hide } özel ikonlar
disabledfalseInput ve buton kilitlenir
readOnlyfalseInput readOnly; buton disabled
iduseId()Input id; buton aria-controls ile eşleşir
inputProps—Base input props ile merge
btnProps—Base button props ile merge

İkonlar ve stil için customization, ARIA için accessibility.

Dönüş değeri

  • inputProps: <input {...inputProps} />
  • btnProps: <button {...btnProps} /> (ikon children olarak)
  • isVisible: mevcut görünürlük
  • toggle(): görünürlüğü değiştirir
  • setVisible(visible): görünürlüğü ayarlar

Prop merging

Kullanıcı props’ları base props’tan sonra uygulanır. Çoğu anahtar override edilebilir; şu alanlar birleştirilir:

  • on* event handler’lar sırayla çağrılır (önce base, sonra kullanıcı)
  • className string’leri boşlukla birleşir

Manuel birleştirme için mergeProps dışa aktarılır.

ÖncekiGirişSonrakiAccessibility

Bu sayfada

  • Temel kullanım
  • Options
  • Dönüş değeri
  • Prop merging
Hata mı var? Düzeltin