UI kütüphaneleri
Password herhangi bir input / button bileşenine bağlanır. Aşağıdaki örnekler aynı hook API’sini kullanır.
useViraPassword() prop bag döndürür. Input ve butona doğrudan spread edin; ikon btnProps.children içindedir.
Paket yalnızca görünürlük mantığını ve erişilebilir props’ları yönetir; markup ve stil size aittir. shadcn/Tailwind, Ant Design (kendi CSS’i + style/className) veya Chakra (style props) fark etmez; aynı hook her UI kitine bağlanır.
Ortak pattern
const { inputProps, btnProps } = useViraPassword({
inputProps: { className: "pr-10" },
btnProps: { className: "absolute inset-y-0 right-2 my-auto" },
})
return (
<div className="relative">
<input {...inputProps} placeholder="Parolanız" />
<button {...btnProps} />
</div>
)shadcn/ui
Bu sitedeki canlı demolar da shadcn Input + Button kullanır:
Ant Design
antd native props kabul eder. Aynı pattern:
import { useViraPassword } from "@virastack/password"
import { Input, Button } from "antd"
function Example() {
const { inputProps, btnProps } = useViraPassword()
const { children, ...restBtn } = btnProps
return (
<div style={{ position: "relative" }}>
<Input {...inputProps} placeholder="Parolanız" />
<Button {...restBtn} type="text" style={{ position: "absolute", right: 4, top: "50%", transform: "translateY(-50%)" }}>
{children}
</Button>
</div>
)
}Chakra UI
Chakra Input / IconButton ile de çalışır:
import { useViraPassword } from "@virastack/password"
import { Input, IconButton, Box } from "@chakra-ui/react"
function Example() {
const { inputProps, btnProps } = useViraPassword()
const { children, ...restBtn } = btnProps
return (
<Box position="relative">
<Input {...inputProps} placeholder="Parolanız" pe="10" />
<IconButton
{...restBtn}
aria-label={restBtn["aria-label"] ?? "Toggle password visibility"}
position="absolute"
right="2"
top="50%"
transform="translateY(-50%)"
variant="ghost"
size="sm"
>
{children}
</IconButton>
</Box>
)
}