> ## Documentation Index
> Fetch the complete documentation index at: https://docs.submito.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# React

> Integrate Submito into a React app.

## Basic example

```tsx theme={null}
import { useState } from 'react'

export default function ContactForm() {
  const [name,    setName]    = useState('')
  const [email,   setEmail]   = useState('')
  const [message, setMessage] = useState('')
  const [loading, setLoading] = useState(false)
  const [success, setSuccess] = useState(false)
  const [error,   setError]   = useState('')

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)
    setError('')

    try {
      const res    = await fetch('https://submito.dev/api/v1/your-endpoint-slug/submit', {
        method:  'POST',
        headers: {
          'Content-Type': 'application/json',
          'x-api-key':    'your-api-key',
        },
        body: JSON.stringify({ name, email, message }),
      })
      const result = await res.json()

      if (result.ok) {
        setSuccess(true)
        setName(''); setEmail(''); setMessage('')
      } else {
        setError(result.error ?? 'Something went wrong.')
      }
    } catch {
      setError('Network error. Please try again.')
    } finally {
      setLoading(false)
    }
  }

  if (success) {
    return <p>Thank you! Your message has been sent.</p>
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Your name"
        value={name}
        onChange={e => setName(e.target.value)}
        required
      />
      <input
        type="email"
        placeholder="Your email"
        value={email}
        onChange={e => setEmail(e.target.value)}
        required
      />
      <textarea
        placeholder="Your message"
        value={message}
        onChange={e => setMessage(e.target.value)}
        required
      />

      {error && <p style={{ color: 'red' }}>{error}</p>}

      <button type="submit" disabled={loading}>
        {loading ? 'Sending…' : 'Send message'}
      </button>
    </form>
  )
}
```

## Using environment variables (Next.js)

Store your credentials in `.env.local`:

```bash theme={null}
NEXT_PUBLIC_SUBMITO_API_KEY=your-api-key
NEXT_PUBLIC_SUBMITO_ENDPOINT=https://submito.dev/api/v1/your-endpoint-slug/submit
```

Then use them in your component:

```tsx theme={null}
const res = await fetch(process.env.NEXT_PUBLIC_SUBMITO_ENDPOINT!, {
  method:  'POST',
  headers: {
    'Content-Type': 'application/json',
    'x-api-key':    process.env.NEXT_PUBLIC_SUBMITO_API_KEY!,
  },
  body: JSON.stringify({ name, email, message }),
})
```

> [!NOTE]
>
> `NEXT_PUBLIC_` variables are exposed to the browser. This is acceptable for a submission-only key since it cannot read or delete your data.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.