Welcome to the Shoutbox Email Sender repository! This project is designed to help developers easily send transactional emails using the Shoutbox API, leveraging the power of Node.js, TypeScript, and React.
Shoutbox is a developer-first email transactional API that allows you to send and manage emails programmatically. With Shoutbox, you can easily integrate email functionality into your applications.
Before you begin, ensure you have the following installed on your machine:
- Node.js
- npm, yarn, or pnpm
-
Clone the repository:
git clone https://github.com/shoutboxnet/react-email-demo.git cd react-email-demo -
Install dependencies:
Using npm:
npm install
Using yarn:
yarn install
Using pnpm:
pnpm install
To send an email using Shoutbox, run the following command with your Shoutbox API key:
SHOUTBOX_API_KEY=MY_API_KEY npx tsx src/SendEmail.tsxReplace MY_API_KEY with your actual Shoutbox API key.
This repository contains a simple example of how to send an email using Shoutbox and React components.
src/
│
├── Email.tsx
└── SendEmail.tsx
This file contains the main logic for sending an email.
import * as React from "react";
import Email from "./Email";
import Shoutbox from "shoutboxnet";
const sendEmail = async () => {
const shoutbox = new Shoutbox();
await shoutbox.sendEmail({
from: "[email protected]",
to: "[email protected]",
subject: "A question about the meetup",
react: <Email url="https://example.com" />,
});
};
export default sendEmail;
(async()=> {
await sendEmail();
})();This script initializes the Shoutbox client and sends an email with the specified parameters. The email content is defined using a React component (Email).
This file defines the React component for the email content.
import * as React from "react";
import { Html } from "@react-email/html";
import { Button } from "@react-email/button";
interface EmailProps {
url: string;
}
const Email: React.FC<EmailProps> = ({ url }) => {
return (
<Html lang="en">
<Button href={url}>Click me</Button>
</Html>
);
};
export default Email;This component uses the @react-email/html and @react-email/button packages to create a simple email with a button.
To integrate this functionality into your own project, follow these steps:
-
Install Shoutbox and React Email packages:
Using npm:
npm install shoutboxnet @react-email/html @react-email/button
Using yarn:
yarn add shoutboxnet @react-email/html @react-email/button
Using pnpm:
pnpm add shoutboxnet @react-email/html @react-email/button
-
Create a React component for your email content:
// src/MyEmail.tsx import * as React from "react"; import { Html } from "@react-email/html"; import { Button } from "@react-email/button"; interface MyEmailProps { url: string; } const MyEmail: React.FC<MyEmailProps> = ({ url }) => { return ( <Html lang="en"> <Button href={url}>Click me</Button> </Html> ); }; export default MyEmail;
-
Create a script to send the email:
// src/SendMyEmail.tsx import * as React from "react"; import MyEmail from "./MyEmail"; import Shoutbox from "shoutboxnet"; const sendMyEmail = async () => { const shoutbox = new Shoutbox(); await shoutbox.sendEmail({ from: "[email protected]", to: "[email protected]", subject: "Your Subject Here", react: <MyEmail url="https://example.com" />, }); }; export default sendMyEmail; (async()=> { await sendMyEmail(); })();
-
Run your email script:
SHOUTBOX_API_KEY=MY_API_KEY npx tsx src/SendMyEmail.tsx
or integrate it in your React project. Note that this cannot work on the client side, only SSR / server.
Replace the placeholder values with your actual data, and you're ready to send emails using Shoutbox in your project!
Contributions are welcome! Please open an issue or submit a pull request for any changes.
This project is licensed under the MIT License. See the LICENSE file for more details.
Thank you for using Shoutbox Email Sender! If you have any questions or need further assistance, feel free to reach out.