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

@virastack/password-toggle (eski adı @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 @virastack/password-toggle (eski adı @omergulcicek/password-input) paketi ile, TypeScript desteğiyle birlikte kolayca parola alanlarını yönetebilirsin.

🚀 Canlı Önizleme

Paketi canlı olarak denemek için: virastack.com/tr/password-toggle

Ö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 @virastack/password-toggle

Kullanım

Aşağıdaki gibi kolayca entegre edebilirsin:

import { usePasswordInput } from "@virastack/password-toggle"
 
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 "@virastack/password-toggle"
 
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 "@virastack/password-toggle"
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 "@virastack/password-toggle"
 
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 "@virastack/password-toggle"
 
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 @virastack/password-toggle?

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: github.com/virastack/password-toggle. 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.