uSend Docs
Quickstarts

Send with Remix

Send email from a Remix action with the usend SDK.

You need a verified domain and an API key. Remix actions and loaders run on the server, which is where the key belongs.

1. Install

Shell
npm install @usend/node

Put USEND_API_KEY=us_123456789 in your .env file.

2. Send from an action

app/routes/contact.tsx
import type { ActionFunctionArgs } from '@remix-run/node';
import { json } from '@remix-run/node';
import { Form, useActionData } from '@remix-run/react';
import { Usend } from '@usend/node';

const usend = new Usend(process.env.USEND_API_KEY);

export async function action({ request }: ActionFunctionArgs) {
  const form = await request.formData();
  const email = String(form.get('email') ?? '');
  const message = String(form.get('message') ?? '');

  const { data, error } = await usend.emails.send({
    from: 'Acme <[email protected]>',
    to: ['[email protected]'],
    reply_to: email,
    subject: 'New contact form message',
    text: message,
  });

  if (error) return json({ ok: false, error: error.message }, { status: 502 });
  return json({ ok: true, id: data.id });
}

export default function Contact() {
  const result = useActionData<typeof action>();
  return (
    <Form method="post">
      <input name="email" type="email" required />
      <textarea name="message" required />
      <button type="submit">Send</button>
      {result?.ok && <p>Thanks, we got it.</p>}
    </Form>
  );
}

Notes

  • Use reply_to so a reply to the notification goes to the visitor.
  • Never put visitor input in from; keep it a fixed address on your verified domain.
  • Every send needs one of html, text or a template.

See Send emails for the full list of fields.