Captcha

Bootstrap 5 Captcha plugin

Captcha is a form validation component based on Recaptcha. It protects you against spam and other types of automated abuse.
Official documentation.

Note: Read the API tab to find all available options and advanced customization


Basic example

Note: You need to include Google API script in your project in order to Captcha to work.

import React from 'react';
import { MDBCaptcha } from 'mdb-react-captcha';

export default function App() {
  return (
    <MDBCaptcha siteKey='YOUR_SITEKEY' />
  );
}
<script src="https://www.google.com/recaptcha/api.js"></script>

Dark theme example

You can use dark theme by adding theme='dark' to MDBCaptcha.

import React from 'react';
import { MDBCaptcha } from 'mdb-react-captcha';

export default function App() {
  return (
    <MDBCaptcha siteKey='YOUR_SITEKEY' theme='dark' />
  );
}
<script src="https://www.google.com/recaptcha/api.js"></script>

Captcha - API


Import

import { MDBCaptcha } from 'mdb-react-captcha';

Properties

MDBCaptcha

Name Type Default Description Example
className String '' Adds a custom class to the MDBCaptcha component. <MDBCaptcha className='custom-class' />
lang String Auto-detects the user's language if unspecified. Optional. Defines the language of the widget. Possible languages: "pl", "en", "es" etc. <MDBCaptcha lang='es' />
siteKey String '' Required. Defines your sitekey. <MDBCaptcha siteKey='MY_SITEKEY' />
size 'normal' | 'compact' normal Optional. Defines the size of the widget.
tabIndex Number 0 Optional. Defines the tabindex of the widget and chellenge. If other elements in your page use tabindex, it should be set to make user navigation easier. <MDBCaptcha tabIndex={5} />
theme 'light' | 'dark' light Optional. Defines theme for Captcha. <MDBCaptcha theme='dark' />

Events

Name Type Description
onError () => any Emmited when CAPTCHA encounters an error.
onExpire () => any Emmited when CAPTCHA response expires and the user needs to solve a new CAPTCHA.
onSuccess () => any Emmited when user submits a successful CAPTCHA response