React Email

React Email builds emails from React components. Render the component to HTML and plain text, then send both with Notix.

1. 1

   Install

   terminalCopy

   npm install notix-js @react-email/components @react-email/render
   # or: pnpm add / yarn add / bun add
   

2. 2

   Write the email

   emails/receipt.tsxCopy

   import { Button, Html, Text } from "@react-email/components";
   
   export function ReceiptEmail({ orderId, url }: { orderId: string; url: string }) {
     return (
       <Html lang="en">
         <Text>Thanks for your order {orderId}.</Text>
         <Button href={url}>View your receipt</Button>
       </Html>
     );
   }
   

3. 3

   Render and send

   send-receipt.tsxCopy

   import { Notix } from "notix-js";
   import { render } from "@react-email/render";
   import { ReceiptEmail } from "./emails/receipt";
   
   const notix = new Notix(process.env.NOTIX_API_KEY);
   
   const email = <ReceiptEmail orderId="4471" url="https://acme.com/orders/4471" />;
   const html = await render(email);
   const text = await render(email, { plainText: true });
   
   const { data, error } = await notix.emails.send({
     from: "Acme <receipts@acme.com>",
     to: "customer@example.com",
     subject: "Your receipt for order 4471",
     html,
     text,
   });
   

Send both html and text, because some mail clients show only one. The from address must be on a domain you have verified in Notix. See Add and verify a domain.

The react shortcut

notix.emails.send also takes a react field. The SDK renders it to html for you before the request goes out:

await notix.emails.send({
  from: "Acme <receipts@acme.com>",
  to: "customer@example.com",
  subject: "Your receipt for order 4471",
  react: <ReceiptEmail orderId="4471" url="https://acme.com/orders/4471" />,
});

This sets only html. Render text yourself, as above, if you want a plain text part too. Batch sending does not take react, so render each email first.

TypeScript and JSX

Files that contain JSX need JSX turned on. In TypeScript, set it in tsconfig.json:

{
  "compilerOptions": { "jsx": "react-jsx" }
}

A Next.js app has this already. For a full Next.js setup, see the Next.js quickstart.