react-send-letter

A robust TypeScript newsletter utility using Nodemailer for React applications. Simplify the process of collecting email addresses and sending newsletters with a customizable and easy-to-use library.

Installation

Install the package via npm:

npm install react-send-letter

Features

• 📝 Collect Multiple Emails: Supports email collection with Enter or comma separation.
• ✅ Built-in Validation: Ensures email addresses are valid and formatted correctly.
• 🎨 Fully Customizable: Easily style components using classNames.
• 🚀 Server-Side Support: Compatible with server actions for seamless integration.
• 📦 SMTP Ready: Supports Gmail and custom SMTP configurations.
• 🔒 TypeScript Support: Full type definitions for improved developer experience.
• ✨ Loading States: Automatically handles loading states during submission.

Usage

Basic Setup

1. Import the components and use them in your React application:

"use client"

import {
  NewsletterFormWrapper,
  Label,
  EmailInput,
  TextInput,
  Textarea,
  SubmitButton,
} from "react-send-letter";
import { sendNewsletter } from "@/actions/reactSendAction";

export default function Newsletter() {
  return (
    <NewsletterFormWrapper
      onSubmit={sendNewsletter}
      classNames={{
        root: "w-[30rem] px-4",
        emailInput: "p-2 !border !border-gray-200 outline-none  w-full ",
        emailContainer: " flex gap-3",
        emailTag:
          "p-2 px-6 relative  bg-green-500 text-white rounded-xl text-sm flex w-fit items-center",
        removeButton: "text-lg -top-2 -right-0 absolute m-2",
        emailTagContainer:"flex flex-wrap gap-2",
      }}
    >
      <div className="flex flex-col gap-4">
        <div className="flex flex-col gap-4">
          <Label>Email Addresses:</Label>
          <EmailInput className=" w-full outline-none  flex flex-col gap-4" />
        </div>

        <div className="flex flex-col gap-4">
          <Label>Subject:</Label>
          <TextInput name="subject" required className="p-2 border w-full" />
        </div>

        <div className="flex flex-col gap-4">
          <Label>Message Content:</Label>
          <Textarea
            name="message"
            required
            className="p-2 border w-full min-h-[200px]"
          />
        </div>

        <SubmitButton className="p-2 bg-blue-500 text-white rounded hover:bg-blue-600">
          Send Newsletter
        </SubmitButton>
      </div>
    </NewsletterFormWrapper>
  );
}

Server Action Setup

Create a server action to handle newsletter submissions:

"use server";

import { EmailData, type SmtpConfig } from "react-send-letter";
import { sendNewsletterServer } from "react-send-letter/server";

export async function sendNewsletter(data: EmailData) {
  const smtpConfig: SmtpConfig = {
    host: process.env.SMTP_HOST!,
    port: Number(process.env.SMTP_PORT),
    secure: true,
    user: process.env.SMTP_USER!,
    password: process.env.SMTP_PASSWORD!,
    from: process.env.SMTP_FROM!,
  };

  const res = await sendNewsletterServer(data, smtpConfig);
  return res;
}

Component API

NewsletterFormWrapper Props

interface NewsletterFormProps {
  classNames?: {
    root?: string;
    container?: string;
    label?: string;
    emailContainer?: string;
    emailTag?: string;
    emailInput?: string;
    removeButton?: string;
    subjectInput?: string;
    bodyTextarea?: string;
    submitButton?: string;
  };
  onSubmit: (data: EmailData) => Promise<void>;
}

EmailData Type

interface EmailData {
  emails: string[];
  subject: string;
  body: string;
}

SmtpConfig Type

interface SmtpConfig {
  host: string;
  port: number;
  secure: boolean;
  user: string;
  password: string;
  from: string;
}

Loading States

The SubmitButton component automatically handles loading states during form submission. When the form is being submitted:

• The button is disabled.
• Displays a "Sending..." message.
• Prevents duplicate submissions.

Security Best Practices

• Avoid Hardcoding Credentials: Use environment variables for sensitive data such as SMTP credentials.
• Gmail App Passwords: Use app-specific passwords instead of your main account password.
• Rate Limiting: Implement rate limiting to prevent abuse when sending large volumes of emails.
• Data Validation: Always validate input data on the server.

TypeScript Support

All exported modules and types are fully typed, enhancing the development experience:

import type {
  SmtpConfig,
  EmailData,
  NewsletterFormProps,
} from "react-send-letter";

Contributing

We welcome contributions! If you'd like to improve the package:

1. Fork the repository.
2. Create a new branch.
3. Submit a pull request with a detailed explanation of your changes.

For major updates, please open an issue to discuss the proposed changes first.

License

This project is licensed under the MIT License.

Example Styles

/* Example styles for customization */
.email-container {
  border: 1px solid #ccc;
  padding: 1rem;
  display: flex;
  gap: 0.5rem;
}

.email-tag {
  background-color: #4caf50;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
}

.submit-button {
  background-color: #007bff;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.submit-button:hover {
  background-color: #0056b3;
}

Start using react-send-letter today to streamline your email workflows in React!