helios-send-react

React hooks for HeliosSend email delivery service, built by Revinity.

Installation

npm install helios-send-react
# or
pnpm add helios-send-react
# or
yarn add helios-send-react

Quick Start

First, set up a backend endpoint (e.g., using Next.js API route or Express):

// Example: pages/api/sendEmail.ts (Next.js)
import { createHandler } from 'helios-send-next';

export default createHandler({
  apiKey: process.env.HELIOS_API_KEY!,
  baseUrl: 'https://api.helios-send.com',
});

Then use the hook in your React component:

import { useHeliosSend } from 'helios-send-react';

function ContactForm() {
  const { sendEmail, loading, error } = useHeliosSend('/api/sendEmail');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    const result = await sendEmail({
      from: { email: '[email protected]', name: 'My App' },
      to: [{ email: '[email protected]' }],
      subject: 'Contact Form Submission',
      html: '<p>New contact form submission</p>',
    });

    if (result) {
      alert('Email sent!');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {error && <div>Error: {error.message}</div>}
      <button type="submit" disabled={loading}>
        {loading ? 'Sending...' : 'Send Email'}
      </button>
    </form>
  );
}

Features

• Simple React hook API
• Loading and error states
• Secure (API key stays on backend)
• Type-safe with TypeScript

Template Design with HeliosEditor

Design templates with HeliosEditor and send them:

await sendEmail({
  from: { email: '[email protected]' },
  to: [{ email: '[email protected]' }],
  templateId: 'welcome-template-123',
  substitutions: {
    userName: 'John Doe',
  },
});