Have ideas to improve npm?Join in the discussion! »

    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

    Install

    npm i react-mailchimp-subscribe

    DownloadsWeekly Downloads

    13,405

    Version

    2.1.3

    License

    MIT

    Unpacked Size

    178 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar