react-mailchimp-subscribe
DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/react-mailchimp-subscribe package

2.1.3 • Public • Published

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>
        <SimpleForm 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

Readme

Keywords

Package Sidebar

Install

npm i react-mailchimp-subscribe

Weekly Downloads

9,599

Version

2.1.3

License

MIT

Unpacked Size

178 kB

Total Files

9

Last publish

Collaborators

  • revolunet