open-index/open-npm huggingface dataset:
npm package: @stadline/react-mtcaptcha
Description: It is an unofficial library to use [MTCaptcha](https://www.mtcaptcha.com/) on a React application.
Latest version: 0.3.0

## What it is

It is an unofficial library to use [MTCaptcha](https://www.mtcaptcha.com/) on a React application.

## How to use

As early as possible, call the initialize function.

```jsx
// 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](https://www.mtcaptcha.com/dev-guide-loading-animation), except the callbacks and render modes which are handled by the lib.

---

Then you can use the `Captcha` component in your forms

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

A more detailed example:

```jsx
// 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>
  );
}
```