# React

Add a React contact form with useFormsReach from @formsreach/react - no custom API route required.

## What you will achieve

A React contact form that posts to FormsReach from the browser using the official hook.

## Prerequisites

- A [FormsReach form and API key](/docs/getting-started/create-form-api-key/)
- A React app that can install npm packages

## Steps

### 1. Install

```bash
npm install @formsreach/react
```

### 2. Use the hook

```tsx
import { useFormsReach } from "@formsreach/react";

export function ContactForm() {
 const { submit, submitting, error } = useFormsReach("YOUR_ACCESS_KEY");

 return (
 <form onSubmit={submit}>
    <input name="name" required />
    <input name="email" type="email" required />
    <textarea name="message" required />
    <button type="submit" disabled={submitting}>
    {submitting ? "Sending…" : "Send"}
    </button>
    {error ? <p role="alert">{error.message}</p> : null}
 </form>
 );
}
```

Use uncontrolled inputs with `name` attributes so the hook can read `FormData`.

### 3. Ship and test

Render `ContactForm` in your app, deploy or run locally, and submit once.

## Verify

- **Submissions** shows the test row
- Button disables while `submitting` is true

## Common failures

| Symptom | Check |
|---|---|
| Empty payload | Every field needs a `name` |
| Hook error outside component | Call `useFormsReach` only inside a React component |
| Next.js server error | Use a Client Component - see [Next.js](/docs/frameworks/nextjs/) |

## Next

- [Next.js guide](/docs/frameworks/nextjs/) for App Router
- [Email channel](/docs/channels/email/)
- Marketing landing: [/integrations/react/](/integrations/react/)