React Email Integration

React Email is an incredible library that lets you build and style your emails using React components instead of dealing with ancient table-based HTML layouts.

Hisend natively supports HTML emails, meaning you don't need any special "React Email SDK". You can simply render your React components into an HTML string and pass that directly to the hisend client.

1. Installation

First, install the official Hisend SDK and the necessary React Email components in your project:

npm install @hisend/sdk @react-email/components

(Note: Depending on your setup, you might also want to install standard React if it is not already present: npm install react react-dom)

2. Build Your Email Component

Create a visually appealing email using React Email's built-in, cross-client tested components like <Html>, <Head>, <Preview>, <Body>, <Container>, and <Text>.

emails/WelcomeEmail.tsx

import {
  Html,
  Head,
  Preview,
  Body,
  Container,
  Text,
  Link,
} from '@react-email/components';
import * as React from 'react';

interface WelcomeEmailProps {
  firstName: string;
}

export default function WelcomeEmail({ firstName }: WelcomeEmailProps) {
  return (
    <Html>
      <Head />
      <Preview>Welcome to our platform!</Preview>
      <Body style={{ backgroundColor: '#ffffff', fontFamily: 'sans-serif' }}>
        <Container style={{ margin: '0 auto', padding: '20px' }}>
          <Text style={{ fontSize: '24px', fontWeight: 'bold' }}>
            Hi {firstName},
          </Text>
          <Text style={{ fontSize: '16px', lineHeight: '24px' }}>
            We're incredibly excited to have you on board! You can now start exploring
            all the features of our platform.
          </Text>
          <Link href="https://yourdomain.com/dashboard" style={{ color: '#0070f3' }}>
            Go to your Dashboard
          </Link>
        </Container>
      </Body>
    </Html>
  );
}

3. Render and Send

To actually send this email via Hisend, you need to call the render function from @react-email/components. This turns your entire React tree into a standard, email-safe HTML string.

You then pass this string to the html parameter of your hisend.emails.send call.

src/send.ts

import { render } from '@react-email/components';
import { Hisend } from '@hisend/sdk';
import WelcomeEmail from '../emails/WelcomeEmail';

// 1. Initialize Hisend with your API Key
const hisend = new Hisend('YOUR_API_KEY');

// 2. Wrap this in an async function (or use top-level await)
async function sendWelcomeEmail() {
  // 3. Render the React component to an HTML string
  const emailHtml = await render(<WelcomeEmail firstName="Thore" />);
  
  // You can optionally render a plain-text version as a fallback
  const emailText = await render(<WelcomeEmail firstName="Thore" />, { plainText: true });

  // 4. Send the email using Hisend
  try {
    const result = await hisend.emails.send({
      from: 'noreply@yourdomain.com',
      to: ['customer@example.com'],
      subject: 'Welcome to our platform!',
      html: emailHtml, // Pass the rendered HTML here
      text: emailText  // Pass the rendered Plain Text here (optional)
    });

    console.log('Successfully sent email! ID:', result.id);
  } catch (error) {
    console.error('Failed to send email:', error);
  }
}

sendWelcomeEmail();

That's it!

Because React Email is entirely UI-based and decoupled from the delivery mechanism, Hisend will always 100% support it. You can learn more about all the available React Email components by checking out the official React Email Documentation.

React Email Integration

1. Installation

2. Build Your Email Component

3. Render and Send

That's it!

On this page