bit-captcha-react

React components untuk BIT_CAPTCHA. Cocok untuk CMS / dashboard dengan Vite atau Webpack.

Install

pnpm add bit-captcha-react

Setup

// main.tsx
import { CaptchaProvider } from 'bit-captcha-react'
import 'bit-captcha-react/styles.css'

createRoot(document.getElementById('root')!).render(
  <CaptchaProvider baseURL={import.meta.env.VITE_BIT_CAPTCHA_BASE_URL}>
    <App />
  </CaptchaProvider>
)

Set di .env:

VITE_BIT_CAPTCHA_BASE_URL=https://api.example.com

Inline (CMS form)

import { BitCaptcha } from 'bit-captcha-react'

const [captchaToken, setCaptchaToken] = useState(null)

<form onSubmit={handleLogin}>
  <input name="nip" />
  <input name="password" type="password" />
  <BitCaptcha onVerify={setCaptchaToken} />
  <button type="submit" disabled={!captchaToken}>Login</button>
</form>

Modal (popup saat klik tombol)

import { BitCaptchaModal } from 'bit-captcha-react'

<BitCaptchaModal onVerify={(token) => handleLogin(token)}>
  {(open) => <button onClick={open}>Login</button>}
</BitCaptchaModal>

Atau controlled:

const [open, setOpen] = useState(false)

<button onClick={() => setOpen(true)}>Login</button>
<BitCaptchaModal
  open={open}
  onOpenChange={setOpen}
  onVerify={(token) => handleLogin(token)}
/>

Hook (custom UI)

import { useCaptcha } from 'bit-captcha-react'

const { challenge, loading, submit, refresh, verifiedToken } = useCaptcha({ type: 'math' })

Props

<BitCaptcha />

| Prop | Type | Default | | --- | --- | --- | | type | 'slide' \| 'rotate' \| 'math' | undefined (server default) | | onVerify | (token: VerifiedToken) => void | wajib | | onError | (err: Error) => void | undefined | | className | string | undefined |

<BitCaptchaModal />

Sama dengan <BitCaptcha /> + props modal: open, onOpenChange, onCancel, children (render prop), autoCloseOnVerify.

Styling

Import styles.css atau override CSS variables:

.bit-cap {
  --bit-cap-accent: #your-color;
  --bit-cap-radius: 12px;
}

License

MIT