https://github.com/ashhitch/react-use-mailchimp

React hook for Mailchimp
https://github.com/ashhitch/react-use-mailchimp

Last synced: about 2 months ago
JSON representation

React hook for Mailchimp

• Host: GitHub
• URL: https://github.com/ashhitch/react-use-mailchimp
• Owner: ashhitch
• License: mit
• Created: 2020-11-23T06:47:06.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2021-05-13T11:43:28.000Z (over 3 years ago)
• Last Synced: 2024-05-21T09:18:25.722Z (7 months ago)
• Language: TypeScript
• Size: 302 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Use React MailChimp

It provides an easy-to use React Hook to subscribe users to your MailChimp lists.

## Find this useful?



# Install

```npm

npm install react-use-mailchimp-signup --save

```

```npm

yarn add react-use-mailchimp-signup

```

## Version 2

Note version 2 fixes possible CORs issues and includes a breaking change to return `error` as a Boolean.

You can now get more information about the error (and success) from the new `message` property

# Usage

```jsx

import React, { useState } from 'react';

// import the hook

import { useMailChimp } from 'react-use-mailchimp-signup';

export const MyComponent = () => {

  const { error, loading, status, subscribe, message } = useMailChimp({

    action: `https://.us18.list-manage.com/subscribe/post?u=XXXXXX&id=XXXXXX`,

  });

  const [inputs, setInputs] = useState({});

  const handleInputChange = (event) => {

    event.persist();

    setInputs((inputs) => ({

      ...inputs,

      [event.target.name]: event.target.value,

    }));

  };

  const handleSubmit = (event) => {

    if (event) {

      event.preventDefault();

    }

    if (inputs) {

      subscribe(inputs);

    }

  };

  return (

    <>

      {error && 
ERROR
}

      {loading && 
...Loading
}

      {status && 
{status}
}

      {message && 
{message}
}


      

        Email

        

        Sign me up!

      

    >

  );

};

```

## Response from `subscribe` method

```

  error: boolean;

  loading: boolean;

  status: UseMailChimpStatus;

  message: string | undefined;

  subscribe: (passedFields: Partial) => Promise;

```