@contact-admin/react

React hook for contact-admin. Requires React 18+.

Install

npm install @contact-admin/react

@contact-admin/js is a peer dependency and will be installed automatically.

Usage

import { useContactForm } from '@contact-admin/react';

function ContactForm() {
  const { isSubmitting, isSuccess, error, submit, reset } = useContactForm({
    apiKey: 'your-api-key',
    siteId: 'your-site-id',        // optional
    onSuccess: (result) => console.log('sent', result.id),
    onError: (err) => console.error(err),
  });

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const fd = new FormData(e.currentTarget);
    submit({
      name: fd.get('name') as string,
      email: fd.get('email') as string,
      message: fd.get('message') as string,
      sourceUrl: window.location.href,
    });
  };

  if (isSuccess) return <p>Message sent! <button onClick={reset}>Send another</button></p>;

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" required placeholder="Name" />
      <input name="email" type="email" required placeholder="Email" />
      <textarea name="message" required placeholder="Message" />
      {error && <p role="alert">{error}</p>}
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Sending…' : 'Send'}
      </button>
    </form>
  );
}

API

useContactForm(options)

| Option | Type | Description | |--------|------|-------------| | apiKey | string | Required. API key from contact-admin dashboard. | | siteId | string | Optional. Filters messages by site/source. | | baseUrl | string | Optional. Custom API base URL. | | onSuccess | (result: SubmitResult) => void | Called after successful submit. | | onError | (error: Error) => void | Called on network or API error. |

Return value

| Field | Type | Description | |-------|------|-------------| | isSubmitting | boolean | True while the request is in-flight. | | isSuccess | boolean | True after a successful submit. | | error | string \| null | Error message, or null if none. | | submit | (data: SubmitOptions) => Promise<void> | Call with form data to submit. | | reset | () => void | Resets all state to initial values. |