Botpoison logo

Getting started with React

1. Install and import the @botpoison/browser library.
npm install @botpoison/browser
2. Create a new Botpoison instance with your public key.
3. Process a challenge using the challenge() function.
4. Forward the solution to your server for verification.
jsx
import React, { useState } from "react";
import axios from "axios";


// 1. Import the library
import Botpoison from "@botpoison/browser";


// 2. Create a new instance with your public key
const botpoison = new Botpoison({
  publicKey: "pk_xxxxxxxx"
});


const Form = () => {
  const [message, setMessage] = useState("");


  const onSubmit = async (e) => {
    e.preventDefault();
    // 3. Process a challenge
    const { solution } = await botpoison.challenge();
    await axios.post("https://example.demo", {
      message,
      // 4. Forward the solution
      _botpoison: solution,
    });
    alert("Form submitted");
  };


  return (
    <form onSubmit={onSubmit}>
      <textarea value={message} onChange={(e) => setMessage(e.target.value)} />
      <button type="submit">Send</button>
    </form>
  );
};


export default Form;