Notifications

model | component | redux integration | action creators | action meta

edikit provides a simple notification system, it offers various notification types and optionally supports TTL (ttl only works when using redux).

Model

 interface INotification {
     id:      string // auto-generated when using redux
     type:    'default' | 'success' | 'warning' | 'danger'
     content: ReactNode
     ttl?:    number
 }

Component

You can use the Notifications component, it accepts an array of notifications.

 import { Notifications } from 'edikit'

 const MyNotifications = () => {
     const notifications = [
         {
             type: 'danger',
             content: 'Something bad happened :/',
         }
     ]

     return (
         <Notifications
             notifications={notifications}
         />
     )
 }

Redux integration

In order to integrate the notification system to redux, you'll have to install three components, notificationsReducer, notificationsEpic and notificationsMiddleware.

 import { combineReducers } from 'redux'
 import { combineEpics, createEpicMiddleware } from 'redux-observable'
 import {
     notificationsReducer,
     notificationsEpic,
     notificationsMiddleware,
 } from 'edikit'

 const rootEpic = combineEpics(
     // …other epics
     notificationsEpic
 )

 const rootReducer = combineReducers({
     // …other reducers
     notifications: notificationsReducer,
 })

 const epicMiddleware = createEpicMiddleware()
 const middlewares = [
     epicMiddleware,
     notificationsMiddleware,
 ]

 const store = createStore(
     rootReducer,
     applyMiddleware(...middlewares)
 )

Once you've setup redux to work with the notification system, you can use the ConnectedNotifications component instead of Notifications.

 import { ConnectedNotifications } from 'edikit'

Trigger notifications using provided action creators

 import { triggerNotification } from 'edikit'

 store.dispatch(triggerNotification({
     type: 'danger',
     content: 'Something bad happened :/',
     ttl: 2000,
 }))

Trigger notifications from actions meta

Once you've installed the notificationsMiddleware, you'll be able to add a meta.notification object to your actions in order to trigger a notification. It can be used to notify user after important events like save, delete, error… without having to trigger extra action.

 store.dispatch({
     type: 'something/CREATE_REQUEST_SUCCESS',
     payload: something,
     meta: {
         notification: {
             type: 'success',
             content: `${something.name} successfully created`,
             ttl: 2000,
         },
     },
 })