Newsletter
The Newsletter component provides a subscription form for users to sign up for a newsletter. It includes an animated title, a description, an input field for email addresses, and a button to submit the form.
Features
🎬 Framer-Motion: Incorporates smooth and interactive animations to enhance the visual appeal and user experience.
📧 React Hook Form: An email subscription form which includes an input field for email and a submit button.
📢 Sonner Toast Notifications: Provides feedback to users on successful or failed subscription attempts.
🔍 Zod Validation: Ensures email addresses are valid before submission using Zod for schema validation. Utilizes the newsletterSchema to define validation rules for the email input.
What's Included
The Newsletter component itself is a structured layout that organizes titles, paragraphs, and a thank-you message into a cohesive email template. It serves as a template for newsletters, providing a consistent format for regular email communications.
< Layout />
The Layout component is a reusable email layout that wraps the main content of the email. It includes a header, footer, and an optional unsubscribe link if the newsletter prop is set to true. This component ensures consistent styling and structure across all email templates.
Layout Props
| Name | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | The content to be rendered within the layout. | |
newsletter | boolean | false | Determines if the unsubscribe link is displayed in the footer. |
< Title />
The Title component is used to display section titles within the newsletter. It allows for customization of the title text and alignment.
Title Props
| Name | Type | Default | Description |
|---|---|---|---|
title | string | '' | The text content of the title. |
center | boolean | false | If true, the title will be centered. |
< Paragraph />
The Paragraph component renders text content within the newsletter. It ensures consistent styling for body text and supports optional center alignment.
Paragraph Props
| Name | Type | Default | Description |
|---|---|---|---|
children | `React.ReactNode | React.ReactNode[] | string` |
center | boolean | false | If true, the text will be centered. |
< ThanksMessage />
The ThanksMessage component is used to display a thank-you message at the end of the newsletter. It includes a customizable message and is typically used to express gratitude to the recipients.
The Hr component is a simple horizontal rule used to separate sections within the newsletter. It provides a visual break between different content blocks.
Zod Validation Schema
The newsletterSchema, defined in the /validations/newsletter file, is used to validate the email input. It ensures that the email address conforms to the required format before submission. This schema is integrated with React Hook Form for form validation.
Setup Component's Needs
The subscribe function from subscribe.js handles the subscription process by interacting with the ConvertKit API. When a user submits their email address through the newsletter form, this function is called to add the email to a specified ConvertKit form and optionally associate it with a specific tag.
- Set up by signing up for ConvertKit and configuring your environment variables:
CONVERTKIT_API_KEY=your-api-key
CONVERTKIT_FORM_ID=your-form-id