Ana içeriğe atla
Ribaunt, türlenmiş prop’lar, her widget olayı için geri çağrı prop’ları ve bir imperatif ref tutamacı sağlayan birinci sınıf bir React sarmalayıcısını ribaunt/widget-react adresinde gönderir — manuel DOM olay bağlama gerekmez. Sarmalayıcı ayrıca dinamik içe aktarmayı dahili olarak ele alır, böylece Next.js App Router bileşeninde kullanırken bile SSR koruma kalıbı hakkında endişelenmeniz gerekmez.
Widget, Web Crypto API’sine dayanır ve bu nedenle güvenli bir bağlam gerektirir. Üretimde https:// ve yerel geliştirme sırasında http://localhost kullanın. Düz yerel ağ HTTP URL’leri bazı tarayıcılarda başarısız olabilir.

​
React sarmalayıcısını kullanma (önerilen)

ribaunt/widget-react’tan RibauntWidget’ı içe aktarın ve JSX’inizin herhangi bir yerine yerleştirin. Her yapılandırma seçeneği türlenmiş bir prop olarak mevcuttur ve her widget olayı bir on* geri çağrısına eşlenir.
Next.js App Router kullanıyorsanız, dosyanın en üstüne 'use client' ekleyin — ayrıntılar için Next.js entegrasyon kılavuzu sayfasına bakın.
'use client'; // needed only in Next.js App Router

import RibauntWidget from 'ribaunt/widget-react';

export default function MyForm() {
  return (
    <RibauntWidget
      challengeEndpoint="/api/captcha/challenge"
      verifyEndpoint="/api/captcha/verify"
      autoVerify={true}
      solveTimeout={15000}
      onVerify={(detail) => console.log('Verified:', detail.solutions)}
      onError={(detail) => console.error('Failed:', detail.error)}
      onStateChange={(detail) => console.log('State:', detail.state)}
    />
  );
}

​
İmperatif tutamaç (ref)

Kendi kodunuzdan reset(), getState() veya startVerification() çağrılarını yapmak için RibauntWidgetHandle olarak türlenmiş bir ref iletin — örneğin, özel bir düğmeden doğrulamayı tetiklemek veya başarısız bir form gönderiminden sonra sıfırlamak için. 
import { useRef } from 'react';
import RibauntWidget, { type RibauntWidgetHandle } from 'ribaunt/widget-react';

export default function MyForm() {
  const widgetRef = useRef<RibauntWidgetHandle>(null);

  return (
    <>
      <RibauntWidget
        ref={widgetRef}
        challengeEndpoint="/api/captcha/challenge"
        verifyEndpoint="/api/captcha/verify"
      />
      <button onClick={() => widgetRef.current?.startVerification()}>
        Verify manually
      </button>
      <button onClick={() => widgetRef.current?.reset()}>
        Reset
      </button>
    </>
  );
}
Tutamaç tarafından açığa çıkarılan üç yöntem şunlardır:
YöntemAçıklama
startVerification()İş kanıtı çözümünü programatik olarak başlatır.
reset()Widget’ı başlangıç durumuna döndürür.
getState()Mevcut widget durum dizesini veya widget henüz monte edilmemişse '' döndürür.

​
Canlı prop güncellemeleri

React sarmalayıcısı, aşağıdaki prop’ları montaj sonrası temel web bileşenine senkronize eder — bu değerlerden herhangi biri değiştiğinde widget’ı yeniden monte etmeniz (örneğin key değiştirerek) gerekmez:
  • challengeEndpoint
  • verifyEndpoint
  • autoVerify
  • showWarning
  • warningMessage
  • solveTimeout
  • disabled
Mevcut entegrasyonunuz bu prop’lardan biri değiştiğinde key değiştirerek yeniden monte etmeyi zorladıysa, bu geçici çözümü güvenle kaldırabilirsiniz.

​
Ham web bileşenini kullanma

DOM olay dinleyicileri üzerinde tam kontrol istediğiniz gelişmiş durumlar için, web bileşenini bir yan etki içe aktarmasıyla kendiniz kaydedebilir ve JSX’te doğrudan <ribaunt-widget> kullanabilirsiniz. Ribaunt hem HTMLElementTagNameMap hem de JSX.IntrinsicElements için TypeScript bildirimleri gönderir, böylece her iki şekilde de tür güvenliği elde edersiniz. 
import { useEffect, useRef } from 'react';

// Side-effect import — registers the custom element
import 'ribaunt/widget';

export default function MyForm() {
  const widgetRef = useRef<import('ribaunt/widget').RibauntWidgetElement>(null);

  useEffect(() => {
    const widget = widgetRef.current;
    if (!widget) return;

    const handleVerify = (e: Event) => {
      console.log('Verified!', (e as CustomEvent).detail.solutions);
    };

    widget.addEventListener('verify', handleVerify);
    return () => widget.removeEventListener('verify', handleVerify);
  }, []);

  return (
    <ribaunt-widget
      ref={widgetRef}
      challenge-endpoint="/api/captcha/challenge"
      verify-endpoint="/api/captcha/verify"
    />
  );
}
Sunucu tarafında oluşturulan bir ortamda ham web bileşeni yaklaşımını kullanırken, SSR sırasında çalışmasını önlemek için içe aktarmayı kendiniz korumalısınız (örneğin bir useEffect içinde). ribaunt/widget-react sarmalayıcısı bunu otomatik olarak yönetir, bu yüzden önerilen yaklaşımdır.
Prop’lar, nitelikler ve olayların tam listesi için Widget yapılandırması ve Widget olayları sayfalarına bakın.