Docs

Verify emails in React

React runs in the browser, so it must call an endpoint on your own server (for example the Next.js route above) rather than ValidReach directly. The API key stays on your server; the browser only talks to your own endpoint.

Before you start

Create an API key under Settings → API keys and keep it in an environment variable named VALIDREACH_API_KEY on your server. Never ship it in browser or mobile code.

Example

import { useState } from 'react';

export function EmailField() {
  const [message, setMessage] = useState('');

  async function check(email: string) {
    const res = await fetch('/api/verify', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email }),
    });
    const { status } = await res.json();
    if (status === 'invalid' || status === 'disposable') {
      setMessage('Please check this address.');
    } else {
      setMessage('');
    }
  }

  return (
    <>
      <input type="email" onBlur={(e) => check(e.target.value)} />
      <p role="alert">{message}</p>
    </>
  );
}

Handle the result

Branch on data.status. Treat invalid and disposable as rejections, retry unknown later when retryable is true (unknown is not billed), and decide on catchall, risky and role by your own policy. HTTP 402 means out of credits and 429 means rate limited.