1.0.0 • Published 9 months ago

@hbertoson/astro-resend v1.0.0

Weekly downloads
-
License
MIT
Repository
-
Last release
9 months ago

Astro Resend

This is an Astro integration that allows you to easily send email notifications for form submissions using Resend in an Astro project. The integration captures form data, generates an HTML email, and sends it to a specified recipient using Resend's API.

Features

  • Capture form submissions and send email notifications.
  • Generate unique identifiers for each form submission.
  • Supports custom headers such as X-Entity-Ref-ID and List-Unsubscribe.
  • Customizable email template with all submitted form fields.
  • Compatible with Astro's server-side routing and form handling.

Prerequisites

Before you can use this integration, you need to have a Resend account. You can sign up for a free account here.

Installation

Install the integration automatically using the Astro CLI:

pnpm astro add @hbertoson/astro-resend
npx astro add @hbertoson/astro-resend
yarn astro add @hbertoson/astro-resend

Or install it manually:

  1. Install the required dependencies
pnpm add @hbertoson/astro-resend
npm install @hbertoson/astro-resend
yarn add @hbertoson/astro-resend
  1. Add the integration to your astro config
+import resend from '@hbertoson/astro-resend'

export default defineConfig({
  integrations: [
+    resend({
        fromEmail: 'youremail@email.com',
        toEmail: 'youremail@email.com',
    }),
  ],
});

Configuration

.env File

You will need to add your API Key your .env file:

  • RESEND_API_KEY (required): Your Resend API key - this should be kept secret

Astro Config Options

verbose

  • Type: boolean
  • Default: false

Enable verbose logging.

fromEmail

  • Type: string
  • Default: onboarding@resend.dev

The email you want to use to send emails.

toEmail

  • Type: string
  • Default: onboarding@resend.dev

The email you want to receive emails at

preventThreading

  • Type: boolean
  • Default: false

Unique string to Prevent Threading on Gmail

unsubscribeUrl

  • Type: string

Link to unsubscribe

Usage/Examples

<body>
    <h1>Astro</h1>
    <form>
        <label for="name">Name</label>
        <input type="text" name="name" />
        <button type="submit">Submit</button>
    </form>
    <script>
        const form = document.querySelector('form');
        if (form) {
            form.addEventListener('submit', async (event) => {
                event.preventDefault();
                const formData = new FormData(form);
                const response = await fetch('/api', {
                    method: 'POST',
                    body: formData,
                });
                const data = await response.json();
                if (response.status === 200) {
                    alert('Form Submitted!');
                    form.reset();
                } else {
                    alert(data.error);
                }
            });
        }
    </script>
</body>

Roadmap

  • Support Multiple Recipients

  • Allow configuration for sending emails to multiple recipients.

    • Enable dynamic recipient selection based on form input (e.g., department-specific notifications).
  • Enhance Documentation

    • Add more examples for common use cases such as contact forms and feedback forms.
    • Provide templates for common email formats.

Contributing

This package is structured as a monorepo:

  • playground contains code for testing the package
  • package contains the actual package

Install dependencies using pnpm:

pnpm i --frozen-lockfile

Start the playground and package watcher:

pnpm dev

You can now edit files in package. Please note that making changes to those files may require restarting the playground dev server.

Made with ❤️ by Hunter Bertoson.

Acknowledgements

Astro

Resend

Florian Lefebvre

MIT License