React

Email checker for React. Real-time email verification in React forms and components.

Voeg realtime e-mailverificatie toe aan uw React applicaties. Valideer e-mails terwijl gebruikers typen, voorkom ongeldige inzendingen en verbeter de formulier UX.

Installatie

npm install @emailverify/react @emailverify/node

yarn add @emailverify/react @emailverify/node

pnpm add @emailverify/react @emailverify/node

Snelle Start

Basis E-mail Input met Validatie

import { useState } from 'react';
import { useEmailVerification } from '@emailverify/react';

function SignupForm() {
  const [email, setEmail] = useState('');
  const { verify, result, isLoading, error } = useEmailVerification();

  const handleEmailBlur = async () => {
    if (email) {
      await verify(email);
    }
  };

  return (
    <form>
      <div className="form-group">
        <label htmlFor="email">E-mail</label>
        <input
          id="email"
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          onBlur={handleEmailBlur}
          className={result?.status === 'invalid' ? 'error' : ''}
        />

        {isLoading && <span className="loading">Verifieren...</span>}

        {result?.status === 'invalid' && (
          <span className="error-message">
            Voer een geldig e-mailadres in
          </span>
        )}

        {result?.status === 'valid' && (
          <span className="success-message">✓ E-mail geverifieerd</span>
        )}

        {result?.result?.disposable && (
          <span className="warning-message">
            Gebruik een permanent e-mailadres
          </span>
        )}
      </div>

      <button type="submit" disabled={result?.status !== 'valid'}>
        Registreren
      </button>
    </form>
  );
}

Provider Setup

Wrap uw app met de EmailVerify provider:

// App.jsx of main.jsx
import { EmailVerifyProvider } from '@emailverify/react';

function App() {
  return (
    <EmailVerifyProvider
      config={{
        // API-aanroepen gaan via uw backend
        apiEndpoint: '/api/verify-email',
      }}
    >
      <YourApp />
    </EmailVerifyProvider>
  );
}

Stel uw API-sleutel nooit bloot in client-side code. Verifieer e-mails altijd via uw backend.

Backend API Route

Maak een beveiligde API-endpoint voor e-mailverificatie:

// pages/api/verify-email.js (Next.js) of uw Express route
import { EmailVerify } from '@emailverify/node';

const client = new EmailVerify({
  apiKey: process.env.EMAILVERIFY_API_KEY,
});

export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Methode niet toegestaan' });
  }

  const { email } = req.body;

  if (!email) {
    return res.status(400).json({ error: 'E-mail is vereist' });
  }

  try {
    const result = await client.verify(email);
    return res.json(result);
  } catch (error) {
    console.error('Verificatiefout:', error);
    return res.status(500).json({ error: 'Verificatie mislukt' });
  }
}

Hooks Referentie

useEmailVerification

De belangrijkste hook voor e-mailverificatie:

const {
  verify,      // Functie om een e-mail te verifieren
  result,      // Verificatieresultaat object
  isLoading,   // Laadstatus
  error,       // Foutobject als verificatie mislukte
  reset,       // Reset de status
} = useEmailVerification(options);

Opties:

interface UseEmailVerificationOptions {
  // Debounce vertraging in milliseconden (standaard: 500)
  debounceMs?: number;

  // Auto-verifieer bij waardeverandering
  autoVerify?: boolean;

  // Cache resultaten voor deze duur (ms)
  cacheDuration?: number;

  // Aangepaste API-endpoint
  apiEndpoint?: string;
}

useEmailInput

Een handige hook die inputstatus combineert met verificatie:

import { useEmailInput } from '@emailverify/react';

function EmailField() {
  const {
    value,
    onChange,
    onBlur,
    verification,
    isValid,
    errorMessage,
  } = useEmailInput({
    debounceMs: 300,
    validateOnBlur: true,
  });

  return (
    <div>
      <input
        type="email"
        value={value}
        onChange={onChange}
        onBlur={onBlur}
      />
      {errorMessage && <span className="error">{errorMessage}</span>}
    </div>
  );
}

Componenten

EmailInput Component

Een voorgebouwde e-mail input met verificatie:

import { EmailInput } from '@emailverify/react';

function MyForm() {
  const handleVerified = (result) => {
    console.log('Verificatieresultaat:', result);
  };

  return (
    <EmailInput
      name="email"
      label="E-mailadres"
      placeholder="u@voorbeeld.com"
      onVerified={handleVerified}
      showValidationStatus
      blockDisposable
      blockRoleBased={false}
      className="custom-input"
    />
  );
}

Props:

Prop	Type	Standaard	Beschrijving
`onVerified`	function	-	Callback wanneer verificatie voltooid is
`showValidationStatus`	boolean	true	Toon validatie-indicatoren
`blockDisposable`	boolean	true	Toon fout voor wegwerp e-mails
`blockRoleBased`	boolean	false	Toon fout voor rolgebaseerde e-mails
`verifyOnBlur`	boolean	true	Verifieer wanneer veld focus verliest
`debounceMs`	number	500	Debounce vertraging

Formulierbibliotheek Integratie

React Hook Form

import { useForm } from 'react-hook-form';
import { useEmailVerification } from '@emailverify/react';

function SignupForm() {
  const {
    register,
    handleSubmit,
    setError,
    clearErrors,
    formState: { errors },
  } = useForm();

  const { verify, isLoading } = useEmailVerification();

  const validateEmail = async (email) => {
    const result = await verify(email);

    if (result.status === 'invalid') {
      setError('email', {
        type: 'validation',
        message: 'Voer een geldig e-mailadres in',
      });
      return false;
    }

    if (result.result?.disposable) {
      setError('email', {
        type: 'validation',
        message: 'Wegwerp e-mails zijn niet toegestaan',
      });
      return false;
    }

    clearErrors('email');
    return true;
  };

  const onSubmit = async (data) => {
    const isValid = await validateEmail(data.email);
    if (!isValid) return;

    // Ga verder met formulierinzending
    console.log('Verzenden:', data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        type="email"
        {...register('email', {
          required: 'E-mail is vereist',
          pattern: {
            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
            message: 'Ongeldig e-mailformaat',
          },
        })}
        onBlur={(e) => validateEmail(e.target.value)}
      />
      {errors.email && <span>{errors.email.message}</span>}
      {isLoading && <span>Verifieren...</span>}

      <button type="submit">Verzenden</button>
    </form>
  );
}

Formik

import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';
import { useEmailVerification } from '@emailverify/react';

function SignupForm() {
  const { verify } = useEmailVerification();

  const validationSchema = Yup.object({
    email: Yup.string()
      .email('Ongeldig e-mailformaat')
      .required('E-mail is vereist')
      .test('email-verification', 'Ongeldig e-mailadres', async (value) => {
        if (!value) return false;
        const result = await verify(value);
        return result.status === 'valid';
      }),
  });

  return (
    <Formik
      initialValues={{ email: '' }}
      validationSchema={validationSchema}
      onSubmit={(values) => console.log(values)}
    >
      {({ isSubmitting, isValidating }) => (
        <Form>
          <Field type="email" name="email" />
          <ErrorMessage name="email" component="span" className="error" />
          {isValidating && <span>Verifieren...</span>}

          <button type="submit" disabled={isSubmitting || isValidating}>
            Verzenden
          </button>
        </Form>
      )}
    </Formik>
  );
}

Zod + React Hook Form

import { z } from 'zod';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { useEmailVerification } from '@emailverify/react';

const schema = z.object({
  email: z.string().email('Ongeldig e-mailformaat'),
  name: z.string().min(2, 'Naam moet minimaal 2 tekens bevatten'),
});

type FormData = z.infer<typeof schema>;

function SignupForm() {
  const { verify, result } = useEmailVerification();

  const {
    register,
    handleSubmit,
    formState: { errors },
    setError,
  } = useForm<FormData>({
    resolver: zodResolver(schema),
  });

  const onSubmit = async (data: FormData) => {
    // Verifieer e-mail voor inzending
    const verification = await verify(data.email);

    if (verification.status !== 'valid') {
      setError('email', {
        type: 'manual',
        message: 'Voer een geldig e-mailadres in',
      });
      return;
    }

    // Verzend formulier
    console.log('Verzenden:', data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="email" {...register('email')} />
      {errors.email && <span>{errors.email.message}</span>}

      <input type="text" {...register('name')} />
      {errors.name && <span>{errors.name.message}</span>}

      <button type="submit">Verzenden</button>
    </form>
  );
}

Debouncing en Prestaties

Ingebouwde Debouncing

De hook bevat standaard debouncing:

const { verify } = useEmailVerification({
  debounceMs: 500, // Wacht 500ms nadat gebruiker stopt met typen
});

// Verifieer bij elke toetsaanslag (intern gedebounced)
<input
  type="email"
  onChange={(e) => verify(e.target.value)}
/>

Handmatige Debouncing

Voor meer controle, gebruik uw eigen debouncing:

import { useDeferredValue, useEffect } from 'react';

function EmailField() {
  const [email, setEmail] = useState('');
  const deferredEmail = useDeferredValue(email);
  const { verify, result } = useEmailVerification();

  useEffect(() => {
    if (deferredEmail && deferredEmail.includes('@')) {
      verify(deferredEmail);
    }
  }, [deferredEmail]);

  return (
    <input
      type="email"
      value={email}
      onChange={(e) => setEmail(e.target.value)}
    />
  );
}

Resultaten Cachen

Cache verificatieresultaten om overtollige API-aanroepen te vermijden:

const { verify } = useEmailVerification({
  cacheDuration: 3600000, // Cache voor 1 uur
});

Styling

CSS Classes

Het EmailInput component past deze classes toe:

/* Container */
.bv-email-input { }

/* Invoerveld */
.bv-email-input__field { }
.bv-email-input__field--valid { }
.bv-email-input__field--invalid { }
.bv-email-input__field--loading { }

/* Status indicatoren */
.bv-email-input__status { }
.bv-email-input__status--valid { }
.bv-email-input__status--invalid { }
.bv-email-input__status--warning { }

/* Foutmelding */
.bv-email-input__error { }

Aangepaste Styling Voorbeeld

.bv-email-input__field {
  padding: 12px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.2s;
}

.bv-email-input__field:focus {
  outline: none;
  border-color: #3182ce;
}

.bv-email-input__field--valid {
  border-color: #48bb78;
}

.bv-email-input__field--invalid {
  border-color: #f56565;
}

.bv-email-input__status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  margin-top: 4px;
}

.bv-email-input__status--valid {
  color: #48bb78;
}

.bv-email-input__status--invalid {
  color: #f56565;
}

Tailwind CSS

<EmailInput
  className="w-full px-4 py-3 border-2 rounded-lg focus:ring-2 focus:ring-blue-500"
  inputClassName="data-[valid]:border-green-500 data-[invalid]:border-red-500"
  statusClassName="text-sm mt-1"
/>

TypeScript Ondersteuning

Volledige TypeScript ondersteuning met geexporteerde types:

import type {
  VerificationResult,
  EmailVerificationOptions,
  UseEmailVerificationReturn,
} from '@emailverify/react';

interface FormState {
  email: string;
  verification: VerificationResult | null;
}

function useSignupForm(): FormState {
  const [email, setEmail] = useState('');
  const { result } = useEmailVerification();

  return {
    email,
    verification: result,
  };
}

Type Definities

interface VerificationResult {
  email: string;
  status: 'valid' | 'invalid' | 'unknown' | 'accept_all';
  result: {
    deliverable: boolean;
    valid_format: boolean;
    valid_domain: boolean;
    valid_mx: boolean;
    disposable: boolean;
    role: boolean;
    catchall: boolean;
    free: boolean;
    smtp_valid: boolean;
  };
  score: number;
  reason: string | null;
}

interface UseEmailVerificationReturn {
  verify: (email: string) => Promise<VerificationResult>;
  result: VerificationResult | null;
  isLoading: boolean;
  error: Error | null;
  reset: () => void;
}

Best Practices

1. Verifieer bij Blur, Niet Bij Elke Toetsaanslag

// ✅ Goed - Verifieer wanneer gebruiker klaar is met typen
<input
  type="email"
  onBlur={(e) => verify(e.target.value)}
/>

// ❌ Vermijd - Te veel API-aanroepen
<input
  type="email"
  onChange={(e) => verify(e.target.value)} // Zonder debouncing
/>

2. Toon Duidelijke Feedback

function EmailStatus({ result, isLoading }) {
  if (isLoading) {
    return <span className="text-gray-500">E-mail controleren...</span>;
  }

  if (!result) return null;

  const messages = {
    valid: { text: '✓ Geldig e-mailadres', className: 'text-green-600' },
    invalid: { text: '✗ Ongeldig e-mailadres', className: 'text-red-600' },
    unknown: { text: '? Kon niet verifieren', className: 'text-yellow-600' },
  };

  const { text, className } = messages[result.status] || {};

  return <span className={className}>{text}</span>;
}

3. Blokkeer Formulierinzending Niet

Sta inzending toe zelfs als verificatie in behandeling is:

function handleSubmit(data) {
  if (verificationResult?.status === 'invalid') {
    // Toon waarschuwing maar blokkeer niet
    showWarning('E-mail is mogelijk ongeldig');
  }

  // Ga verder met inzending
  submitForm(data);
}

4. Verwerk Netwerkfouten

function EmailField() {
  const { verify, result, error, isLoading } = useEmailVerification();

  return (
    <div>
      <input type="email" onBlur={(e) => verify(e.target.value)} />

      {error && (
        <span className="text-yellow-600">
          Kon e-mail niet verifieren. Toch doorgaan.
        </span>
      )}
    </div>
  );
}

Gerelateerde Bronnen

Next.js Integratie

Server-side verificatie met Next.js

TypeScript SDK

Volledige TypeScript ondersteuning

Node.js SDK

Backend integratie

React

Next.js Integratie

TypeScript SDK

Node.js SDK

On this page