@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>
  );
}