/react-mailchimp-subscribe

mailchimp

Primary LanguageJavaScript

react-mailchimp-subscribe

npm package

React subscribe form for Mailchimp.

Working demo : https://revolunet.github.io/react-mailchimp-subscribe/

Usage

Create a list on mailchimp, add a form and get its "action" attribute from the mailchimp UI

The MailchimpSubscribe gives you a render prop with a subscribe method that you can call with your data.

In your app :

import MailchimpSubscribe from "react-mailchimp-subscribe"

const url = "//xxxx.us13.list-manage.com/subscribe/post?u=zefzefzef&id=fnfgn";

// simplest form (only email)
const SimpleForm = () => <MailchimpSubscribe url={url}/>

// use the render prop and your custom form
const CustomForm = () => (
  <MailchimpSubscribe
    url={url}
    render={({ subscribe, status, message }) => (
      <div>
        <CustomForm onSubmitted={formData => subscribe(formData)} />
        {status === "sending" && <div style={{ color: "blue" }}>sending...</div>}
        {status === "error" && <div style={{ color: "red" }} dangerouslySetInnerHTML={{__html: message}}/>}
        {status === "success" && <div style={{ color: "green" }}>Subscribed !</div>}
      </div>
    )}
  />
)

see examples in ./demo/src