Kendi Kendini Kapatan ve Konumlandırma

Buton bileşeninize açıkça children geçirmenize gerek yoktur. btnProps nesnesi zaten children olarak doğru ikonu veya metni içerir. Propları kendi kendini kapatan bir bileşene yaymanız yeterlidir.

Bu örnek ayrıca değiştirme butonunun mutlak konumlandırma kullanılarak girdi alanının içine nasıl yerleştirileceğini gösterir.


import { useViraPassword } from '@virastack/password-toggle';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
 
export function SelfClosingDemo() {
  const { inputProps, btnProps } = useViraPassword();
 
  return (
    <div className="relative w-full max-w-sm">
      <Input 
        {...inputProps} 
        className="pr-10" // Metin çakışmasını önlemek için padding ekleyin
        placeholder="Şifre" 
      />
      
      {/* 
        Çocukları (children) açıkça geçirmediğimize dikkat edin.
        {...btnProps} tarafından otomatik olarak işlenir.
      */}
      <Button 
        {...btnProps}
        variant="ghost" 
        size="icon"
        className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
      />
    </div>
  );
}