@commercetools-frontend/notifications v22.23.3
@commercetools-frontend/notifications
A general-purpose notification system built on top of redux.
Install
$ npm install --save @commercetools-frontend/notifications
Action Creator
addNotification(notification, [options])
Arguments
notification
(Object): This notification will get added to the list. SeeNotification
.[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'sid
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.
{
id: Number,
dismiss: Function,
}
Notification
{
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
{
type: 'ADD_NOTIFICATION',
payload: Object,
meta: {
dismissAfter: Number
}
}
removeNotification(id)
Arguments
id
(Number): This notification will be removed
Example action
{
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 itsid
and adismiss
function for convenience.
Integration
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
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
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 (
<div>
{
this.props.notifications.map(
notification => {
const Component = this.props.mapNotificationToComponent(notification)
const dismiss = () => removeNotification(notification.id)
return (
<Component
key={notification.id}
notification={notification}
dismiss={dismiss}
/>
)
}
)
}
</div>
)
};
}
- 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
andside
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 callingaddNotification
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 theonDismiss
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.
MCNG: When a certain plugin must provide a way to render a notification, it can export it from the plugin and we can asynchronously add it to the notifications renderer on plugin activation.
23 days ago
23 days ago
27 days ago
27 days ago
28 days ago
29 days ago
29 days ago
30 days ago
30 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
10 months ago
9 months ago
7 months ago
9 months ago
9 months ago
7 months ago
10 months ago
9 months ago
7 months ago
9 months ago
8 months ago
8 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
10 months ago
9 months ago
7 months ago
7 months ago
7 months ago
7 months ago
10 months ago
9 months ago
7 months ago
9 months ago
7 months ago
9 months ago
6 months ago
7 months ago
10 months ago
7 months ago
10 months ago
7 months ago
6 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
7 months ago
8 months ago
7 months ago
9 months ago
8 months ago
7 months ago
8 months ago
6 months ago
9 months ago
8 months ago
7 months ago
10 months ago
7 months ago
7 months ago
6 months ago
6 months ago
10 months ago
10 months ago
8 months ago
9 months ago
7 months ago
6 months ago
8 months ago
8 months ago
8 months ago
7 months ago
9 months ago
8 months ago
9 months ago
10 months ago
10 months ago
9 months ago
9 months ago
9 months ago
8 months ago
8 months ago
9 months ago
8 months ago
6 months ago
8 months ago
10 months ago
6 months ago
8 months ago
10 months ago
9 months ago
9 months ago
6 months ago
9 months ago
7 months ago
9 months ago
7 months ago
7 months ago
6 months ago
7 months ago
8 months ago
7 months ago
9 months ago
6 months ago
10 months ago
7 months ago
6 months ago
10 months ago
7 months ago
8 months ago
8 months ago
7 months ago
8 months ago
8 months ago
6 months ago
7 months ago
8 months ago
8 months ago
7 months ago
9 months ago
10 months ago
8 months ago
7 months ago
8 months ago
9 months ago
7 months ago
6 months ago
7 months ago
10 months ago
9 months ago
9 months ago
7 months ago
9 months ago
10 months ago
10 months ago
6 months ago
7 months ago
6 months ago
10 months ago
9 months ago
8 months ago
7 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
12 months ago
1 year ago
12 months ago
1 year ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago