use-mailchimp-form

This package helps you integrate the MailChimp subscribe form into your React App. It is implemented in the React hooks way to handle the business logic. You can just make your efforts for the view. 😀 The view component can be fully customized or implemented with other React form library.

Install

$ npm install use-mailchimp-form

or

$ yarn add use-mailchimp-form

Mailchimp

To get your mailchimp form post endpoint.

1. Go to the audience Page. In the right-hand side, click the dropdown menu, Manage Audience > Signup Form.
2. Select Embedded Form.
3. Inside integration the code, find the form post action url, which is like: https://aaaaaaaaa.us20.list-manage.com/subscribe/post?u=xxxxxxxxxxxxxxxxxx&id=yyyyyyyyyy

We need this url later.

Usage

import { useFormFields, useMailChimpForm } from "use-mailchimp-form";

// The useFormFields is not necessary. You can use your own form component.  

export default function App() {
  const url = "YOUR_SUBSCRIBE_URL";
  // The url looks like the url below:
  // https://aaaaaaaaa.us20.list-manage.com/subscribe/post?u=xxxxxxxxxxxxxxxxxx&id=yyyyyyyyyy
  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}
        />
        <button>submit</button>
      </form>
      {loading && "submitting"}
      {error && message}
      {success && message}
    </div>
  );
}

Live Demo