@omergulcicek/password-input

"use client"

import React from "react";
import { Input } from "@/components/ui/input";

import { usePasswordInput } from "@omergulcicek/password-input";

export default function Home() {
  const {
    inputProps,
    InputWrapper,
    wrapperProps,
  } = usePasswordInput({
    password: true,
  });

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

"use client"

import React from "react";
import { Input } from "@/components/ui/input";

import { usePasswordInput } from "@omergulcicek/password-input";

export default function Home() {
  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>
  )
}

"use client"

import React from "react";
import { House, Star } from "lucide-react";
import { Input } from "@/components/ui/input";

import { usePasswordInput } from "@omergulcicek/password-input";

export default function Home() {
  const {
    inputProps,
    InputWrapper,
    wrapperProps,
  } = usePasswordInput({
    password: {
      icons: {
        show: <House className="size-4" />,
        hide: <Star className="size-4" />,
      },
    },
  });

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