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

Frontend geliştiricileri için DX odaklı araç seti: starter’lar, ajan kuralları, form hook’ları ve rehber.

Ürünler

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

Keşfet

  • Hakkında
  • Marka
  • Destek

© 2026 ViraStack.

Açık kaynak · MIT

Örnekler

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

Özel ikonlar

icons.show / icons.hide ile kendi SVG veya bileşenlerinizi kullanın.

← Tüm örnekler·custom-icons

Önizleme

import { Home, Star } from "lucide-react"
import { useViraPassword } from "@virastack/password"
 
function Example() {
  const { inputProps, btnProps } = useViraPassword({
    icons: {
      show: <Star />,
      hide: <Home />,
    },
  })
 
  return (
    <div className="relative">
      <input {...inputProps} placeholder="Parolanız" />
      <button {...btnProps} />
    </div>
  )
}

Detaylar

  • show: parola gizliyken (göster butonu).
  • hide: parola görünürken (gizle butonu).
  • icons alanı ReactNode kabul eder: ikon, metin veya herhangi bir JSX.

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

ÖncekiDisabled / readOnlySonrakiÖzel metin

Bu sayfada

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