From a8fa1f6c1f33a3654a7b9bb11f4c9f8102db43a0 Mon Sep 17 00:00:00 2001 From: KMKoushik Date: Sat, 7 Dec 2024 22:14:07 +1100 Subject: [PATCH] add react email docs --- apps/docs/guides/use-with-react-email.mdx | 92 +++++++++++++++++++++++ apps/docs/mint.json | 6 ++ 2 files changed, 98 insertions(+) create mode 100644 apps/docs/guides/use-with-react-email.mdx diff --git a/apps/docs/guides/use-with-react-email.mdx b/apps/docs/guides/use-with-react-email.mdx new file mode 100644 index 0000000..196000d --- /dev/null +++ b/apps/docs/guides/use-with-react-email.mdx @@ -0,0 +1,92 @@ +--- +title: Use with React Email +description: "A guide on how to use Unsend with React Email" +--- + +## Introduction + +[React Email](https://react.email/docs/introduction) is a library for building emails with React. In this guide, we will show you how to use Unsend with React Email. + +## Install dependencies + + + ```sh npm + npm install unsend @react-email/render + ``` + +```sh yarn +yarn add unsend @react-email/render +``` + +```sh pnpm +pnpm add unsend @react-email/render +``` + +```sh bun +bun add unsend @react-email/render +``` + + + +## Create an email template + +```tsx +import * as React from "react"; +import { Html } from "@react-email/html"; +import { Button } from "@react-email/button"; + +export function Email(props) { + const { url } = props; + + return ( + + + + ); +} +``` + +## Send an email using Unsend + +```ts +import { Unsend } from "unsend"; +import { render } from "@react-email/render"; +import { Email } from "./email"; + +const unsend = new Unsend({ apiKey: "us_your_unsend_api_key" }); + + const html = await render(); + +const response = await unsend.emails.send({ + to: "hello@unsend.dev", + from: "hello@unsend.dev", + subject: "Unsend email", + html, +}); +``` + +## Build your project + +### JavaScript + +If you're using nodejs, importing `email.jsx` might fail. make sure to add these to your babel config: + +```js +{ + "plugins": ["@babel/plugin-proposal-class-properties"] +} +``` + +Checkout this [example](https://github.com/unsend-dev/unsend-js-examples/tree/main/react-email-js) + +### TypeScript + +Just add `jsx` to your `tsconfig.json` + +```json +{ + "compilerOptions": { "jsx": "react-jsx" } +} +``` + +Checkout this [example](https://github.com/unsend-dev/unsend-js-examples/tree/main/react-email-ts) diff --git a/apps/docs/mint.json b/apps/docs/mint.json index 96196af..8ea170f 100644 --- a/apps/docs/mint.json +++ b/apps/docs/mint.json @@ -54,6 +54,12 @@ "get-started/smtp" ] }, + { + "group": "Guides", + "pages": [ + "guides/use-with-react-email" + ] + }, { "group": "Community SDKs", "pages": [