Using the useMailprex hook

The useMailprex hook integrates Mailprex contact forms in React with minimal boilerplate.

For custom field maps, use useMailprexForm. For non-React apps, use sendMailprex.

Install


npm install mailprex

Package version 2.0.0-alpha.1 exports useMailprex (v1-compatible) plus v2 APIs.

Setup

Register at mailprex.excelso.xyz .
Generate a form token in the dashboard (mk_live_…).
Store the token in an environment variable — do not hardcode in source.


NEXT_PUBLIC_MAILPREX_FORM_TOKEN=mk_live_…

Basic usage


"use client";
import { useMailprex } from "mailprex";
 
export function ContactForm() {
  const { formData, handleChange, handleSubmit, response } = useMailprex({
    url: "https://api.mailprex.excelso.xyz/email/send",
    webName: "My Website",
    emailDestiny: "you@example.com",
    formToken: process.env.NEXT_PUBLIC_MAILPREX_FORM_TOKEN!,
  });
 
  return (
    <form onSubmit={handleSubmit}>
      <input
        name="fullname"
        value={formData.fullname}
        onChange={handleChange}
        required
      />
      <input
        name="email"
        type="email"
        value={formData.email}
        onChange={handleChange}
        required
      />
      <input name="phone" value={formData.phone} onChange={handleChange} />
      <input name="service" value={formData.service} onChange={handleChange} />
      <textarea
        name="message"
        value={formData.message}
        onChange={handleChange}
        required
      />
      <button type="submit">Send</button>
 
      {response.loading && <p>Sending…</p>}
      {response.error && <p>Error: {response.error}</p>}
      {response.data && <p>Sent!</p>}
    </form>
  );
}

Parameters

Prop	Type	Description
`url`	string	API endpoint (`…/email/send`)
`webName`	string	Site name for the email subject
`emailDestiny`	string	Recipient inbox for notifications
`formToken`	string	Dashboard token (`mk_live_…`)
`captchaToken`	string	Optional Turnstile token

Returns

Property	Description
`formData`	`{ fullname, email, message, phone, service }`
`handleChange`	Standard controlled input handler
`handleSubmit`	POST to Mailprex API
`response`	`{ data, loading, error }`

Fixed field names

The hook expects these name attributes on inputs:

fullname
email
message
phone (optional)
service (optional)

For additional or renamed fields, use useMailprexForm.

Next steps

Complete example
SDK v2 — sendMailprex() without React
Integration guide