useHookFormMask

React hook that enhances password inputs with a built-in show/hide toggle functionality, designed for seamless integration and improved user experience.

Star on Github npm Package

npm i @omergulcicek/password-input

Default Example

Simple password input with show/hide toggle

const {
  inputProps,
  InputWrapper,
  wrapperProps,
} = usePasswordInput({
  password: true,
});

return (
  <InputWrapper {...wrapperProps}>
    <Input {...inputProps} placeholder="Enter your password" />
  </InputWrapper>
)

Custom Text Example

Custom show/hide text labels

const {
  inputProps,
  InputWrapper,
  wrapperProps,
} = usePasswordInput({
  password: {
    icons: {
      show: <span className="text-xs">Show</span>,
      hide: <span className="text-xs">Hide</span>,
    },
  },
});

return (
  <InputWrapper {...wrapperProps}>
    <Input {...inputProps} placeholder="Enter your password" />
  </InputWrapper>
)

Custom Icon Example

Custom eye icons for show/hide

import { Eye, EyeOff } from "lucide-react";

const {
  inputProps,
  InputWrapper,
  wrapperProps,
} = usePasswordInput({
  password: {
    icons: {
      show: <Eye className="size-4" />,
      hide: <EyeOff className="size-4" />,
    },
  },
});

return (
  <InputWrapper {...wrapperProps}>
    <Input {...inputProps} placeholder="Enter your password" />
  </InputWrapper>
)