19 Haziran 2025

React Parola Inputları için Göster/Gizle Hooku

React

@omergulcicek/password-input

React projelerinde parola inputları için göster/gizle işlevselliği eklemek için bir çok şey yapmamız gerekiyor. State tanımlamak, onClick eventleri yazmak, ikonları yönetmek gibi işlemler zaman alıcı ve tekrarlayıcı olabilir. Özellikle TypeScript ile çalışırken, bu işlemleri daha da karmaşık hale getirebilir.

Bu ihtiyacı karşılamak için geliştirdiğim @omergulcicek/password-input paketi ile, TypeScript desteğiyle birlikte kolayca parola alanlarını yönetebilirsin.

🚀 Canlı Önizleme

Paketi canlı olarak denemek için: omergulcicek-password-input.vercel.app/

npm package @omergulcicek/password-input

Özellikler

  • Parola Maskesi: Parola alanlarında otomatik maskeleme
  • Gizle/Göster Butonu: Parola alanlarını göster/gizle butonu ile kontrol etme
  • Özel İkonlar: Herhangi bir ikon paketi yada farklı içerikler ile uyumlu
  • TypeScript Desteği: Tam tip güvenliği ile geliştirme
  • Esneklik: Herhangi bir CSS framework veya özel stillerle çalışma

Kurulum

npm install @omergulcicek/password-input

Kullanım

Aşağıdaki gibi kolayca entegre edebilirsin:

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

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

return (
  <InputWrapper {...wrapperProps}>
    <input {...inputProps} />
  </InputWrapper>
)

Özelleştirme

Parola inputunu özelleştirmek için usePasswordInput fonksiyonuna çeşitli parametreler geçebilirsin:

Varsayılan ikon Lucide React ikonlarıdır. İstersen kendi ikonlarını veya metinleri kullanabilirsin.

Özelleştirilmiş Metinler

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

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} />
  </InputWrapper>
)

Özelleştirilmiş İkon

import { usePasswordInput } from "@omergulcicek/password-input"
import { House, Star } from "lucide-react"

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

return (
  <InputWrapper {...wrapperProps}>
    <input {...inputProps} />
  </InputWrapper>
)

Özelleştirilmiş sınıf isimleri

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

const { inputProps, InputWrapper, wrapperProps } = usePasswordInput({
  password: true,
  classNames: {
    wrapper: "my-custom-wrapper", // outer container div
    suffix: "my-custom-suffix",     // right-side icon container
    button: "my-custom-button"    // toggle button element
  }
});

return (
  <InputWrapper {...wrapperProps}>
    <input {...inputProps} />
  </InputWrapper>
)

cn() fonksiyonu

Bu fonksiyon, sınıf isimlerini birleştirmek için kullanılır. Opsiyonel bir alandır. Projenizde var olan bir cn() fonksiyonunu kullanmak isterseniz, bu şekilde entegre edebilirsiniz:

import { usePasswordInput } from "@omergulcicek/password-input"
import { cn } from "@/lib/utils" // your class name utility

const { inputProps, InputWrapper, wrapperProps } = usePasswordInput({
  password: true,
  classNames: {
    wrapper: "my-custom-wrapper",
    suffix: "my-custom-suffix", 
    button: "my-custom-button"
  },
  cn // optional
});

return (
  <InputWrapper {...wrapperProps} className="border rounded-md">
    <input {...inputProps} className="px-3 py-2 w-full" />
  </InputWrapper>
)

Neden @omergulcicek/password-input?

Bu paket, React projelerinde parola inputları için göster/gizle işlevselliğini kolayca eklemek amacıyla tasarlandı. TypeScript desteği ile birlikte, esnek ve özelleştirilebilir bir çözüm sunuyor. Ayrıca, farklı ikon setleri ve stillerle uyumlu çalışabilmesi sayesinde projelerinizde rahatlıkla kullanabilirsiniz.


Katkıda Bulun

GitHub üzerinden açık kaynak olarak geliştirmekteyim. Herhangi bir sorunla karşılaştığınızda issue açabilir veya PR gönderebilirsiniz. GitHub üzerinden repo'yu yıldızlayıp bana destek olabilirsiniz.