feat(integrations): add Lettermint docs and example (#3732)

2026-09-14 14:18:02 +08:00 · 2026-09-08 15:20:51 +02:00
parent 0f0cb94e1f
commit 0b1fa2a978
7 changed files with 165 additions and 1 deletions
@@ -120,7 +120,8 @@
              "integrations/azure-communication-email",
              "integrations/mailersend",
              "integrations/scaleway",
-              "integrations/plunk"
+              "integrations/plunk",
+              "integrations/lettermint"
            ]
          },
          {
@@ -0,0 +1,82 @@
+---
+title: "Send email using Lettermint"
+sidebarTitle: "Lettermint"
+description: "Learn how to send an email using React Email and the Lettermint Node.js SDK."
+"og:image": "https://react.email/static/covers/react-email.png"
+---
+
+## 1. Install dependencies
+
+Get the [react-email](https://www.npmjs.com/package/react-email) package and the [Lettermint Node.js SDK](https://www.npmjs.com/package/lettermint).
+
+<CodeGroup>
+
+```sh npm
+npm install lettermint react-email
+```
+
+```sh yarn
+yarn add lettermint react-email
+```
+
+```sh pnpm
+pnpm add lettermint react-email
+```
+
+```sh bun
+bun add lettermint react-email
+```
+
+</CodeGroup>
+
+## 2. Create an email using React
+
+Start by building your email template in a `.jsx` or `.tsx` file.
+
+```tsx email.tsx
+import { Button, Html } from "react-email";
+
+interface EmailProps {
+  url: string;
+}
+
+export function Email({ url }: EmailProps) {
+  return (
+    <Html lang="en">
+      <Button href={url}>Click me</Button>
+    </Html>
+  );
+}
+```
+
+## 3. Convert to HTML and send email
+
+Import the email template you just built, convert into an HTML string, and use the Lettermint SDK to send it.
+
+```tsx
+import { Lettermint } from "lettermint";
+import { render } from "react-email";
+import { Email } from "./email";
+
+const email = Lettermint.email(process.env.LETTERMINT_SENDING_TOKEN);
+
+const emailHtml = await render(<Email url="https://example.com" />);
+
+await email
+  .from("you@example.com")
+  .to("user@gmail.com")
+  .subject("hello world")
+  .html(emailHtml)
+  .send();
+```
+
+## Try it yourself
+
+<Card
+  title="Lettermint example"
+  icon="arrow-up-right-from-square"
+  iconType="duotone"
+  href="https://github.com/resend/react-email/tree/main/examples/lettermint"
+>
+  See the full source code.
+</Card>
@@ -32,4 +32,7 @@
  <Card title="Plunk" href="/integrations/plunk">
    Send email using Plunk
  </Card>
+  <Card title="Lettermint" href="/integrations/lettermint">
+    Send email using Lettermint
+  </Card>
 </CardGroup>
@@ -0,0 +1,26 @@
+{
+  "name": "react-email-with-lettermint",
+  "license": "MIT",
+  "private": true,
+  "sideEffects": false,
+  "type": "module",
+  "main": "./dist/index.js",
+  "files": [
+    "dist/**"
+  ],
+  "scripts": {
+    "build": "tsdown src/index.tsx --format esm --target node20",
+    "dev": "tsdown src/index.tsx --format esm --target node20 --watch",
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {
+    "lettermint": "2.6.0",
+    "react-email": "6.0.3",
+    "react": "19.2.4",
+    "react-dom": "19.2.4"
+  },
+  "devDependencies": {
+    "tsdown": "0.21.9",
+    "typescript": "5.9.3"
+  }
+}
@@ -0,0 +1,13 @@
+import { Button, Html } from 'react-email';
+
+interface EmailProps {
+  url: string;
+}
+
+export const Email: React.FC<Readonly<EmailProps>> = ({ url }) => {
+  return (
+    <Html lang="en">
+      <Button href={url}>Click me</Button>
+    </Html>
+  );
+};
@@ -0,0 +1,14 @@
+import { Lettermint } from 'lettermint';
+import { render } from 'react-email';
+import { Email } from './email';
+
+const email = Lettermint.email(process.env.LETTERMINT_SENDING_TOKEN || '');
+
+const emailHtml = await render(<Email url="https://example.com" />);
+
+await email
+  .from('you@example.com')
+  .to('user@gmail.com')
+  .subject('hello world')
+  .html(emailHtml)
+  .send();
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "composite": false,
+    "declaration": true,
+    "declarationMap": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "inlineSources": false,
+    "isolatedModules": true,
+    "moduleResolution": "node",
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "preserveWatchOutput": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "strictNullChecks": true,
+    "jsx": "react-jsx",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "target": "ESNext",
+    "types": ["vitest/globals"]
+  },
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"]
+}