A React hooks-based solution for integrating MailChimp subscribe forms into your React applications. This package handles all the business logic, allowing you to focus on the UI implementation. The view component can be fully customized or implemented with any React form library.
- 🎣 React Hooks-based implementation
- 🎨 Fully customizable UI
- 📦 Zero dependencies (except React)
- 🔒 Type-safe with TypeScript support
- 🚀 Modern ESM and CommonJS support
- Node.js >= 20.0.0
- npm >= 10.0.0
- React >= 18.2.0
Using npm:
npm install use-mailchimp-formUsing yarn:
yarn add use-mailchimp-form- Navigate to the
Audiencepage in your Mailchimp dashboard - Click the dropdown menu
Manage Audience > Signup Forms - Select
Embedded Form - In the generated code, locate the form's action URL. It will look like:
https://aaaaaaaaa.us20.list-manage.com/subscribe/post?u=xxxxxxxxxxxxxxxxxx&id=yyyyyyyyyy
import { useFormFields, useMailChimpForm } from "use-mailchimp-form";
export default function SubscribeForm() {
const url = "YOUR_SUBSCRIBE_URL";
const { loading, error, success, message, handleSubmit } =
useMailChimpForm(url);
const { fields, handleFieldChange } = useFormFields({
EMAIL: "",
});
return (
<div>
<form
onSubmit={event => {
event.preventDefault();
handleSubmit(fields);
}}
>
<input
id="EMAIL"
autoFocus
type="email"
value={fields.EMAIL}
onChange={handleFieldChange}
placeholder="Enter your email"
/>
<button type="submit" disabled={loading}>
{loading ? "Subscribing..." : "Subscribe"}
</button>
</form>
{loading && <p>Submitting...</p>}
{error && <p className="error">{message}</p>}
{success && <p className="success">{message}</p>}
</div>
);
}loading: Boolean indicating submission statuserror: Boolean indicating if an error occurredsuccess: Boolean indicating successful submissionmessage: String containing response messagehandleSubmit: Function to handle form submission
fields: Object containing form field valueshandleFieldChange: Function to handle field changes
The useFormFields hook is optional. You can use your preferred form management solution (Formik, React Hook Form, etc.) with useMailChimpForm:
import { useMailChimpForm } from "use-mailchimp-form";
import { useForm } from "react-hook-form";
export default function CustomForm() {
const { handleSubmit: submitToMailchimp } = useMailChimpForm("YOUR_URL");
const { register, handleSubmit } = useForm();
const onSubmit = data => {
submitToMailchimp(data);
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register("EMAIL")} type="email" required />
<button type="submit">Subscribe</button>
</form>
);
}Contributions are welcome! Please feel free to submit a Pull Request.
MIT © Gary Lai