# @berlitz/newsletter-sign-up

> NewsletterSignUp component for the Max Design System

Latest version **4.4.5** (published 2026-05-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install @berlitz/newsletter-sign-up
pnpm add @berlitz/newsletter-sign-up
yarn add @berlitz/newsletter-sign-up
bun add @berlitz/newsletter-sign-up
```

## Health

**Score 45/100 (D)** — status: active.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

## Facts

| | |
|---|---|
| Version | 4.4.5 |
| Published | 2026-05-26 |
| First published | 2018-12-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 65.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | berlitz |

## Links

- npm: https://www.npmjs.com/package/@berlitz/newsletter-sign-up
- Homepage: https://github.com/berlitz-global/max/blob/master/components/newsletter-sign-up/CHANGELOG.md
- npm.io page: https://npm.io/package/@berlitz/newsletter-sign-up

## Dependencies (8)

- [yup](https://npm.io/package/yup.md) ^0.26.6
- [formik](https://npm.io/package/formik.md) ^1.5.8
- [@berlitz/input](https://npm.io/package/@berlitz/input.md) 4.3.3
- [@berlitz/button](https://npm.io/package/@berlitz/button.md) 4.5.5
- [@berlitz/select](https://npm.io/package/@berlitz/select.md) 3.6.3
- [@berlitz/globals](https://npm.io/package/@berlitz/globals.md) 4.9.4
- [@berlitz/form-field](https://npm.io/package/@berlitz/form-field.md) 5.3.3
- [styled-components-rtl](https://npm.io/package/styled-components-rtl.md) 5.2.0

## Recent versions

- 4.4.5 (latest) — 2026-05-26
- 4.1.24-test.2 (canary) — 2022-01-24
- 4.4.4 — 2026-03-09
- 4.4.3 — 2025-06-03
- 4.4.2 — 2025-05-28
- 4.4.1 — 2025-04-23
- 4.4.0 — 2025-04-22
- 4.3.11 — 2025-04-21
- 4.3.10 — 2025-04-16
- 4.3.9 — 2025-04-16
- 4.3.8 — 2025-04-16
- 4.3.7 — 2025-02-28
- 4.3.6 — 2025-02-27
- 4.3.5 — 2024-03-11
- 4.3.4 — 2024-01-19
- … 278 more at https://npm.io/package/@berlitz/newsletter-sign-up/versions

## README

# NewsletterSignUp [![npm version](https://img.shields.io/npm/v/@berlitz/newsletter-sign-up.svg)](https://www.npmjs.com/package/@berlitz/newsletter-sign-up)

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


```shell
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

```jsx
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](/?path=/story/components-footer--default)'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.

---
_Source: https://npm.io/package/@berlitz/newsletter-sign-up · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._