Build and send a React email template

npm install @sendflit/email-components @sendflit/sdk react react-dom

// emails/password-reset.tsx
import {
  Html, Head, Preview, Body, Container, Section, Heading, Text, Button, Hr,
} from "@sendflit/email-components";

export function PasswordReset({ name, resetUrl }: { name: string; resetUrl: string }) {
  return (
    <Html>
      <Head />
      <Preview>Reset your password. The link expires in 30 minutes.</Preview>
      <Body style={{ backgroundColor: "#f5f5f5" }}>
        <Container>
          <Section>
            <Heading as="h2">Reset your password</Heading>
            <Text>Hi {name}, use the button below to choose a new password.</Text>
            <Button href={resetUrl}>Reset password</Button>
            <Hr />
            <Text>If you didn't ask for this, you can ignore this email.</Text>
          </Section>
        </Container>
      </Body>
    </Html>
  );
}

// scripts/preview.tsx
import { writeFileSync } from "node:fs";
import { render } from "@sendflit/email-components";
import { PasswordReset } from "../emails/password-reset";

writeFileSync(
  "preview.html",
  render(<PasswordReset name="Ada" resetUrl="https://app.example.com/reset/abc" />)
);

npx tsx scripts/preview.tsx && open preview.html

import { render } from "@sendflit/email-components";
import SendFlit from "@sendflit/sdk";
import { PasswordReset } from "./emails/password-reset";

const sendflit = new SendFlit({ apiKey: process.env.SENDFLIT_API_KEY });

export async function sendPasswordReset(user: { id: string; email: string; name: string }, resetUrl: string) {
  const html = render(<PasswordReset name={user.name} resetUrl={resetUrl} />);
  await sendflit.send({
    from: "security@yourdomain.com",
    to: user.email,
    subject: "Reset your password",
    html,
  }, `password-reset-${user.id}-${Date.now()}`);
}