NewsletterSignUp

Newsletter signup components has been designed to add custom fields to the footer for newsletter subscription. You can pass fieldset details via fields prop which the component renders to html form fields. The field type can be select, checkbox and text.

Installation

yarn add @berlitz/newsletter-sign-up

Props

| Argument | Type | Required | Default | Example | | --------- | ---- | -------- | ------- | ------- | | endpointUrl | string | ❌ | | | errorText | string | ❌ | 'There was an error signing up! Please refresh and try again.' | | fields | array | ❌ | [ ] | | getEndpointUrl | function | ❌ | | | hiddenFields | array | ❌ | [ ] | | mapFormValuesToPostBody | function | ❌ | | | noteText | string | ❌ | | | submitText | string | ❌ | 'Sign Up', | | submittingText | string | ❌ | 'Submitting' | | successText | string | ❌ | 'Thanks for signing up!' | | title | string | ✅ | | | unsubscribeText | string | ❌ | |

Usage

import NewsletterSignUp from '@berlitz/newsletter-sign-up'
const MyApp = () => <NewsletterSignUp
  endpointUrl="//signup.example.com"
  title="Sign up for newsletter"
  fields={[
    { name: "name", type: "text", label: "Your name" },
    { name: "email", type: "email", label: "Your email" }
  ]}
  />

When to use this component

Pass it to Footer's newsletterComponent prop as node.

Notes

Static endpointUrl can be overwritten with getEndpointUrl function which generates url from values of form. Data is being posted in application/json format. The posted object can be remapped passing the mapFormValuesToPostBody function.