Remix / React Router

npm install @spacepost/node

app/lib/spacepost.server.ts

import { SpacePost } from "@spacepost/node";

export const spacepost = new SpacePost(process.env.SPACEPOST_API_KEY);

Files ending in .server.ts are never bundled for the browser.

app/routes/contact.tsx

import { Form, useActionData } from "react-router"; // or "@remix-run/react"
import type { ActionFunctionArgs } from "react-router"; // or "@remix-run/node"
import { spacepost } from "~/lib/spacepost.server";

export async function action({ request }: ActionFunctionArgs) {
  const form = await request.formData();
  const { data, error } = await spacepost.emails.send({
    from: "Acme <hello@acme.com>",
    to: ["support@acme.com"],
    replyTo: String(form.get("email")),
    subject: `Contact form: ${form.get("name")}`,
    text: String(form.get("message")),
  });
  if (error) return { ok: false as const, message: error.message };
  return { ok: true as const, id: data.id };
}

export default function Contact() {
  const result = useActionData<typeof action>();
  return (
    <Form method="post">
      <input name="name" placeholder="Name" required />
      <input name="email" type="email" placeholder="Email" required />
      <textarea name="message" required />
      <button type="submit">Send</button>
      {result?.ok && <p>Sent!</p>}
      {result && !result.ok && <p>{result.message}</p>}
    </Form>
  );
}