https://github.com/imgarylai/use-mailchimp-form

✉️ MailChimp form react integration implemented in React hooks way.
https://github.com/imgarylai/use-mailchimp-form

mailchimp mailchimp-embed react react-hooks reactjs

Last synced: 6 months ago
JSON representation

✉️ MailChimp form react integration implemented in React hooks way.

• Host: GitHub
• URL: https://github.com/imgarylai/use-mailchimp-form
• Owner: imgarylai
• License: mit
• Created: 2020-05-08T06:51:38.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2024-09-17T09:48:22.000Z (about 1 year ago)
• Last Synced: 2024-09-17T14:13:15.388Z (about 1 year ago)
• Topics: mailchimp, mailchimp-embed, react, react-hooks, reactjs
• Language: TypeScript
• Homepage:
• Size: 14.4 MB
• Stars: 27
• Watchers: 2
• Forks: 6
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# use-mailchimp-form [![npm](https://img.shields.io/npm/v/use-mailchimp-form)](https://www.npmjs.com/package/use-mailchimp-form) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) [![codecov](https://codecov.io/gh/imgarylai/use-mailchimp-form/branch/main/graph/badge.svg?token=HK9ISNOG26)](https://codecov.io/gh/imgarylai/use-mailchimp-form)

This package helps you integrate the [MailChimp](https://mailchimp.com/) 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

```bash

$ npm install use-mailchimp-form

```

or

```base

$ yarn add use-mailchimp-form

```

## Mailchimp

To get your mailchimp form post endpoint.

1. Go to the `audience` Page. In the right-hand side, click the dropdown menu, `Manage Audience > Signup Form`.

2. Select `Embedded Form`. 

3. 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

```jsx

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&id=yyyyyyyyyy

  const {

      loading,

      error,

      success,

      message,

      handleSubmit

    } = useMailChimpForm(url);

  const { fields, handleFieldChange } = useFormFields({

    EMAIL: "",

  });

  return (

    


       {

          event.preventDefault();

          handleSubmit(fields);

        }}

      >

        

        submit

      

      {loading && "submitting"}

      {error && message}

      {success && message}

    

  );

}


```

## Live Demo

[![Edit use-mailchimp-form](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/use-mailchimp-form-7r3br?fontsize=14&hidenavigation=1&theme=dark)