Package Exports

mattwbcs-use-mailchimp-form
mattwbcs-use-mailchimp-form/dist/index.js
mattwbcs-use-mailchimp-form/dist/index.module.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (mattwbcs-use-mailchimp-form) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

$ yarn add use-mailchimp-form

Mailchimp

To get your mailchimp form post endpoint.

Go to the audience Page. In the right-hand side, click the dropdown menu, Manage Audience > Signup Form.
Select Embedded Form.
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&amp;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>
  );
}

mattwbcs-use-mailchimp-form