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

Edit in sandbox 
        
            
          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