useViraPassword()

Manage input type and the visibility button with a single hook. Props spread directly.

Basic usage

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

Options

useViraPassword(options?) accepts optional settings:

Field	Default	Description
`defaultVisible`	`false`	Initial visibility
`icons`	Eye / EyeOff	`{ show, hide }` custom icons
`disabled`	`false`	Locks input and button
`readOnly`	`false`	Input readOnly; button disabled
`id`	`useId()`	Input id; button matches via `aria-controls`
`inputProps`	-	Merge with base input props
`btnProps`	-	Merge with base button props

For icons and styling, see customization; for ARIA, see accessibility.

Return value

inputProps: <input {...inputProps} />
btnProps: <button {...btnProps} /> (icon as children)
isVisible: current visibility
toggle(): toggles visibility
setVisible(visible): sets visibility

Prop merging

User props are applied after base props. Most keys can be overridden; these fields are merged:

on* event handlers are called in order (base first, then user)
className strings are joined with a space

mergeProps is exported for manual merging.