React SDK

CaptchaLa CAPTCHA 公式の React コンポーネント + フック。@captcha-la/react として公開されています。

ライブデモ

📦

demo-v1.captcha.la/react — 4 種類の product モードすべてを試せる実行可能なデモ。ソース: Captcha-La/react-example。

インストール

bash

npm install @captcha-la/react
# または
yarn add @captcha-la/react
# または
pnpm add @captcha-la/react

Peer dependencies: react@^17 || ^18 || ^19、react-dom@^17 || ^18 || ^19。

クイックスタート

コンポーネント

tsx

import { Captchala } from '@captcha-la/react'

function App() {
  return (
    <Captchala
      appKey="your-app-key"
      product="popup"
      onSuccess={(result) => console.log('pass_token:', result.token)}
      onError={(err) => console.error(err)}
    />
  )
}

フック

tsx

import { useCaptchala } from '@captcha-la/react'

function LoginForm() {
  const { ready, verify } = useCaptchala({
    appKey: 'your-app-key',
    product: 'bind',
    action: 'login',
  })

  async function handleSubmit(e) {
    e.preventDefault()
    const result = await verify()
    // result.token をフォームと一緒に送信
  }

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit" disabled={!ready}>Login</button>
    </form>
  )
}

Props

Prop	型	デフォルト	説明
`appKey`	`string`	必須	CaptchaLa の Application Key
`serverToken`	`string`	-	サーバー発行のワンタイム challenge トークン。アプリで `server_token_required=true` の場合は必須。
`product`	`'popup' \| 'float' \| 'embed' \| 'bind'`	`'popup'`	表示モード
`action`	`string`	`'default'`	アクション識別子
`lang`	`string`	`'zh-CN'`	言語コード
`onSuccess`	`(result) => void`	-	成功コールバック
`onError`	`(error) => void`	-	失敗コールバック
`onClose`	`() => void`	-	クローズ時コールバック
`onReady`	`() => void`	-	Ready 時コールバック
`className`	`string`	-	コンテナの class 名
`style`	`CSSProperties`	-	コンテナのインラインスタイル

メソッド（`ref` 経由）

tsx

import { useRef } from 'react'
import { Captchala, type CaptchalaRef } from '@captcha-la/react'

function App() {
  const ref = useRef<CaptchalaRef>(null)
  return (
    <>
      <Captchala ref={ref} appKey="your-app-key" />
      <button onClick={() => ref.current?.verify()}>Verify</button>
    </>
  )
}

メソッド	説明
`verify()`	検証をトリガー
`reset()`	CAPTCHA の状態をリセット
`destroy()`	インスタンスを破棄
`bindTo(selector)`	要素にバインド（`bind` モード用）
`setLang(lang)`	言語をその場で切り替え

本番: `serverToken` モード

tsx

import { useState, useEffect } from 'react'
import { Captchala } from '@captcha-la/react'

function LoginPage() {
  const [token, setToken] = useState<string>()

  useEffect(() => {
    fetch('/api/captcha-token')         // 自前のバックエンド
      .then((r) => r.json())
      .then((d) => setToken(d.server_token))
  }, [])

  if (!token) return <div>Loading…</div>

  return (
    <Captchala
      serverToken={token}
      appKey="pk_your_public_app_key"
      action="login"
      onSuccess={(r) => console.log('pass_token:', r.token)}
    />
  )
}

バックエンドの完全な仕様は API リファレンスを参照してください。

リンク

npm · GitHub · example
Web SDK 概要 · API リファレンス

React SDK ​

ライブデモ ​

インストール ​

クイックスタート ​

コンポーネント ​

フック ​

Props ​

メソッド（ref 経由） ​

本番: serverToken モード ​

リンク ​