Prop merge

Merge name, autoComplete, className, and handlers with inputProps and btnProps.

← All examples·prop-merge

Preview

import { useViraPassword } from "@virastack/password"
 
function Example() {
  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"),
    },
  })
 
  return (
    <div className="relative">
      <input {...inputProps} placeholder="New password" />
      <button {...btnProps} />
    </div>
  )
}

Details

User props merge with base props.
on* handlers are chained; className is merged.
This example is not a form library; it shows prop merge behavior.

For the hook API see useViraPassword(), for styling and icons see customization.