@hbertoson/astro-resend
v1.0.0
Published
Astro Resend Integration
Downloads
13
Maintainers
hbertosonReadme
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-resendnpx astro add @hbertoson/astro-resendyarn astro add @hbertoson/astro-resendOr install it manually:
- Install the required dependencies
pnpm add @hbertoson/astro-resendnpm install @hbertoson/astro-resendyarn add @hbertoson/astro-resend- Add the integration to your astro config
+import resend from '@hbertoson/astro-resend'
export default defineConfig({
integrations: [
+ resend({
fromEmail: '[email protected]',
toEmail: '[email protected]',
}),
],
});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:
[email protected]
The email you want to use to send emails.
toEmail
- Type:
string - Default:
[email protected]
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:
playgroundcontains code for testing the packagepackagecontains the actual package
Install dependencies using pnpm:
pnpm i --frozen-lockfileStart the playground and package watcher:
pnpm devYou 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
