@stadline/react-mtcaptcha

What it is

It is an unofficial library to use MTCaptcha on a React application.

How to use

As early as possible, call the initialize function.

// src/index.js

import React, { useEffect } from 'react';
import { initialize } from '@stadline/react-mtcaptcha';

function App(props) {
  useEffect(() => {
    initialize({
      sitekey: 'MTPublic-oy2GGOZq8',
      theme: 'neowhite',
      lang: 'fr',
    });
  }, []);

  return <Router />; // or whatever
}

You can use any config option, for example custom styles, except the callbacks and render modes which are handled by the lib.

Then you can use the Captcha component in your forms

return <Captcha onVerified={state => alert(state.verifiedToken)} />;

A more detailed example:

// src/components/ContactForm.js
import React, { useState } from 'react';
import Captcha from '@stadline/react-mtcaptcha';

function ContactForm(props) {
  const [formValue, setFormValue] = useState({
    message: '',
    verifiedToken: null,
  });
  const setFieldValue = (key, value) => setFormValue(fv => ({ ...fv, [key]: value }));

  const onSubmit = event => {
    event.preventDefault();
    alert('submit');
  };

  return (
    <form onSubmit={onSubmit}>
      <label>
        <div>Text:</div>
        <textarea
          value={formValue.message}
          onChange={event => setFieldValue('message', event.target.value)}
        />
      </label>

      <Captcha onVerified={state => setFieldValue('verifiedToken', state.verifiedToken)} />

      <button type="submit" disabled={formValue.message.length < 1 || !formValue.verifiedToken}>
        Submit
      </button>
    </form>
  );
}