@berlitz/newsletter-sign-up

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.