Customization

İkonlar, metin, stil ve kilit durumları: headless API ile kendi tasarım sisteminize uyum.

İkonlar & metin

icons alanı ReactNode kabul eder: SVG, bileşen veya düz metin. show parola gizliyken, hide görünürken render edilir.

import { Home, Star } from "lucide-react"
import { useViraPassword } from "@virastack/password"
 
const { inputProps, btnProps } = useViraPassword({
  icons: {
    show: <Star />,
    hide: <Home />,
  },
})

Metin örneği:

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

Varsayılan ikonlar helpers sayfasından da import edilebilir. Daha fazla örnek: özel ikonlar, özel metin.

inputProps & btnProps

name, autoComplete, className ve ekstra handler’lar options üzerinden merge edilir:

const { inputProps, btnProps } = useViraPassword({
  id: "signup-password",
  inputProps: {
    name: "password",
    autoComplete: "new-password",
    className: "pr-10",
  },
  btnProps: {
    className: "absolute inset-y-0 right-2 my-auto",
    onClick: () => analytics.track("password_toggled"),
  },
})

Merge kuralları useViraPassword() sayfasında. Örnek: Prop merge.

disabled & readOnly

Her iki durumda da görünürlük değiştirilemez: buton disabled olur, toggle / setVisible no-op’dur.

disabled: toggle kilitli

// Input + buton disabled; toggle / setVisible no-op
useViraPassword({ disabled: true })
 
// Input readOnly; buton disabled; toggle / setVisible no-op
useViraPassword({ readOnly: true })