# @commercetools-frontend/notifications > A general-purpose notification system built on top of redux Latest version **27.17.0** (published 2026-11-03) · MIT license · 0 weekly downloads ## Install ```sh npm install @commercetools-frontend/notifications pnpm add @commercetools-frontend/notifications yarn add @commercetools-frontend/notifications bun add @commercetools-frontend/notifications ``` ## Health **Score 65/100 (B)** — status: active. Positive: esm support; no vulnerabilities; has provenance; recently updated; high maintenance score. Warnings: low downloads; no types. ## Facts | | | |---|---| | Version | 27.17.0 | | Published | 2026-11-03 | | First published | 2018-06-25 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | ESM + CommonJS | | Dependencies | 2 | | Unpacked size | 27.7 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Provenance | attested (GitHub Actions) | | GitHub stars | 79 | | Maintainers | tdeekens, emmenko, commercetools-admin | | Keywords | javascript, frontend, react, toolkit | ## Links - npm: https://www.npmjs.com/package/@commercetools-frontend/notifications - Repository: https://github.com/commercetools/merchant-center-application-kit - Homepage: https://docs.commercetools.com/merchant-center-customizations - Issues: https://github.com/commercetools/merchant-center-application-kit/issues - npm.io page: https://npm.io/package/@commercetools-frontend/notifications ## Dependencies (2) - [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.22.15 - [@babel/runtime-corejs3](https://npm.io/package/@babel/runtime-corejs3.md) ^7.22.15 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 27.17.0 (latest) — 2026-11-03 - 0.0.0-changesets-ghcommit-temp-changeset-release-main-20261103220908 (changesets-ghcommit-temp-changeset-release-main) — 2026-11-03 - 0.0.0-canary-20261103220809 (canary) — 2026-11-03 - 0.0.0-fec-1395-sentry-graphql-spans-20261103191331 (fec-1395-sentry-graphql-spans) — 2026-11-03 - 0.0.0-FEC-1433-content-skeleton-early-shell-20261016130021 (FEC-1433-content-skeleton-early-shell) — 2026-10-16 - 0.0.0-fix-preview-publish-on-push-20261006164301 (fix-preview-publish-on-push) — 2026-10-06 - 0.0.0-save-toolbar-cqw-v2-20260908184114 (save-toolbar-cqw-v2) — 2026-09-08 - 0.0.0-FEC-1297-part-1-bundle-json-output-mode-20260904143500 (FEC-1297-part-1-bundle-json-output-mode) — 2026-09-04 - 0.0.0-fix-nimbus-optional-build-4030-20260708142501 (fix-nimbus-optional-build-4030) — 2026-07-08 - 0.0.0-FEC-1017-shell-splitter-region-20260618140924 (FEC-1017-shell-splitter-region) — 2026-06-18 - 0.0.0-fix-serialize-javascript-20260428090559 (fix-serialize-javascript) — 2026-04-28 - 0.0.0-CRAFT-2074-eslint9-migration-core-20260227150731 (CRAFT-2074-eslint9-migration-core) — 2026-02-27 - 0.0.0-CRAFT-2080-app-kit-i-18-n-date-format-incorrect-for-regional-english-locales-en-be-en-ie-etc-20260202153139 (CRAFT-2080-app-kit-i-18-n-date-format-incorrect-for-regional-english-locales-en-be-en-ie-etc) — 2026-02-02 - 0.0.0-CRAFT-2074-eslint-v9-migration-new-pkg-20260130195951 (CRAFT-2074-eslint-v9-migration-new-pkg) — 2026-01-30 - 0.0.0-CRAFT-1995-upgrade-sentry-react-20251211194319 (CRAFT-1995-upgrade-sentry-react) — 2025-12-11 - … 1491 more at https://npm.io/package/@commercetools-frontend/notifications/versions ## README # @commercetools-frontend/notifications

Latest release (latest dist-tag) Latest release (next dist-tag) Minified + GZipped size GitHub license

A general-purpose notification system built on top of redux. ## Install ```bash $ npm install --save @commercetools-frontend/notifications ``` ## Action Creator ### `addNotification(notification, [options])` #### Arguments 1. `notification` _(Object)_: This notification will get added to the list. See `Notification`. 1. `[options]` _(Object)_: If specified, further customizes the behavior of the notification. - `[dismissAfter = 0]` _(Number)_: dismiss the component after this duration (milliseconds) - `[onDismiss]` _(Function)_: Callback which will get called with the notification's `id` before it is dismissed. The payload must be a `Notification` object. The `id` will be added by the middleware automatically. #### Returns After dispatching a notification to the middleware a `notificationHandle` will be returned. ```js { id: Number, dismiss: Function, } ``` #### Notification ```js { id: Number, } ``` A notification in the state will always have an `id` which gets added by the middleware automatically, plus any props passed as the payload on creation. #### Action Format ```js { type: 'ADD_NOTIFICATION', payload: Object, meta: { dismissAfter: Number } } ``` ### `removeNotification(id)` #### Arguments 1. `id` _(Number)_: This notification will be removed #### Example action ```js { type: 'REMOVE_NOTIFICATION', payload: Number, } ``` ## Middleware The middleware - adds a unique `id` to every notification - handles scheduling removal of notifications specifying `dismissAfter` - returns a `notificationHandle` for each dispatched notification containing its `id` and a `dismiss` function for convenience. ### Integration ```js import { createStore, applyMiddleware } from 'redux'; import { middleware as notificationsMiddleware } from '@commercetools-frontend/notifications'; import rootReducer from './reducers'; // Note: this API requires redux@>=3.1.0 const store = createStore( rootReducer, applyMiddleware(notificationsMiddleware) ); ``` ## Reducer Mount the reducer on your notifications store slice. ### `reducer` #### Example ```js combineReducers({ notifications: reducer, ...more reducers here... }) ``` ## Action Types Although not required for use in the application, these are exported as well. - `ADD_NOTIFICATION` - `REMOVE_NOTIFICATION` They can be used for filtering out notification actions in the logger. ## Usage ### With React ```js import React from 'react' import PropTypes from 'prop-types'; import { removeNotification } from '@commercetools-frontend/notifications' // Accepts a notification map function, // which returns the component based on the notification. // // function mapNotificationToComponent (notification) { // const map = { // 'success': SuccessNotification, // 'intercom': IntercomNotification, // } // return map[notification.kind] || InfoNotification // } // // accept notifications, which should come from connecting to the store class LeftNavigation extends React.PureComponent { static propTypes: { notifications: PropTypes.arrayOf(PropTypes.object).isRequired, mapNotificationToComponent: PropTypes.func.isRequired, }; render () { return (
{ this.props.notifications.map( notification => { const Component = this.props.mapNotificationToComponent(notification) const dismiss = () => removeNotification(notification.id) return ( ) } ) }
) }; } ``` --- - The notification system is unaware of the types of notifications you are going to dispatch. It's recommended to call the types of notifications you have `kind`, to not confuse it with Action Types. - The notification system is also unaware of the `domain`'s used in the application. A domain is the part of the application where the notification will be displayed. We currently have: `global`, `page` and `side` - `addNotification` is a low-level function. It's recommended to use it in your own action-creators, and use your own action-creators in your application exclusively calling `addNotification` behind the scenes. - to hide all notifications, iterate over the notifications in the state and call `removeNotification(id)` on each one: `state.notifications.forEach(notif => removeNotification(notif.id))`. Simply resetting the state would lead to the `onDismiss` callbacks not being fired. - It's entirely up to you to render the notifications. Connect to the store and iterate over them. - If your notifications need to have different styles or even different React components when rendering, use the `kind` to decide which component to render or which style to use. - Since notifications are stored in the Redux store, they should be serializeable. Avoid setting functions on notifications. Again, use the `kind`, pass any required information and handle it in the component rendering the notification. --- _Source: https://npm.io/package/@commercetools-frontend/notifications · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._