npm.io
0.1.1 • Published yesterday

@zachtrice/react-contact-form

Licence
MIT
Version
0.1.1
Deps
0
Size
22 kB
Vulns
0
Weekly
0
SummaryDependencyVersions

@zachtrice/react-contact-form

A tiny, unstyled, dependency-free React contact form:

  • Built-in honeypot spam trap (bots fill a hidden field; humans don't).
  • Required-field validation and idle → sending → sent / error status handling.
  • JSON POST to any endpoint you provide (SES Lambda, Formspree, your API…).
  • No CSS imposed: style it with className / classNames hooks. Ships types.

Install

npm install @zachtrice/react-contact-form

Usage

import { ContactForm } from '@zachtrice/react-contact-form'

export default function Contact() {
  return (
    <ContactForm
      endpoint={process.env.NEXT_PUBLIC_CONTACT_ENDPOINT!}
      classNames={{
        form: 'flex flex-col gap-4',
        label: 'text-sm text-muted',
        input: 'rounded border px-3 py-2',
        textarea: 'rounded border px-3 py-2',
        button: 'rounded bg-black px-5 py-2 text-white disabled:opacity-60',
        error: 'text-sm text-red-500',
        success: 'rounded border p-4'
      }}
    />
  )
}

The POST body defaults to { name, email, message } (plus any extraFields).

Props

prop type default description
endpoint string — Required. Receives the JSON POST.
fields ('name'|'email'|'message')[] all three Which fields to render, in order.
labels Partial<Record<field,string>> — Override field labels.
placeholders Partial<Record<field,string>> — Field placeholders.
honeypotName string 'company' Hidden spam-trap field name.
submitLabel string 'Send message'
sendingLabel string 'Sending…'
successMessage ReactNode default text Shown after a successful send.
extraFields Record<string,string> — Merged into the POST body.
transformPayload (data) => unknown — Customize the request body.
onSuccess / onError () => void / (err) => void — Callbacks.
className string — Class on the <form>.
classNames ContactFormClassNames {} Class hooks for every element.

Endpoint contract

The endpoint receives Content-Type: application/json with the collected fields. Any non-2xx response is surfaced as an error. Pair it with a small SES (or other) function on the backend.

License

MIT ZachTRice

Keywords

reactcontactformhoneypotemailtypescriptunstyledheadless