gib/GibSend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add react email docs

Browse Source
This commit is contained in:
KMKoushik
2024-12-07 22:14:07 +11:00
parent b9e8475ffa
commit a8fa1f6c1f
2 changed files with 98 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
apps/docs/guides/use-with-react-email.mdx Normal file
View File

@@ -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
<CodeGroup>
```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
```
</CodeGroup>
## 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 (
<Html lang="en">
<Button href={url}>Click me</Button>
</Html>
);
}
```
## 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(<Email url="https://unsend.dev" />);
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)

6
apps/docs/mint.json
View File

@@ -54,6 +54,12 @@
"get-started/smtp" "get-started/smtp"
] ]
}, },
{
"group": "Guides",
"pages": [
"guides/use-with-react-email"
]
},
{ {
"group": "Community SDKs", "group": "Community SDKs",
"pages": [ "pages": [