sheikhg1900/react-notifier-system-redux

Indirect redux implementation of "react-notification-system", with edit and remove options. The alternative of "react-notification-system-redux"

React Notifier System

Redux implementation of react-notifier-system.

Indirect redux implementation of react-notification-system, with edit and remove options.

The alternative of react-notification-system-redux

Installing

npm install react-notifier-system-redux

Using

redux store configuration

import {createStore, combineReducers} from 'redux';
import {reducer as notifications} from 'react-notifier-system-redux';

export function configureStore(initialState = {}) {
  return createStore(
    combineReducers({
      
      // storeKey. You can keep it as you want. Its default value is "notifications" 
      notifications,
      .....,
      ...

    }),
    initialState
  );
}

add react notifier redux component

For optimal appearance, this component must be rendered on a top level HTML element in your application to avoid position conflicts.

import * as React from 'react'
import { Notifier } from 'react-notifier-system-redux'

const App = () => (
  <div>
    {/* optional property [storeKey="notifications"]. storeKey is only required when it is configured other then "notifications". See your store configuration */}
    <Notifier />
  </div>
)

ReactDOM.render(
  React.createElement(App),
  document.getElementById('app')
);

example of dispatching actions

import React from 'react'
import { connect } from 'react-redux'
import { showNotification, clearNotifications, removeNotification } from  'react-notifier-system-redux'

const DispatchigExample = class extends React.Component<{dispatch: func}> {
  dispatchNotificationActions() {
      const { dispatch } = this.props
      dispatch(clearNotifications())

      dispatch(showNotification({
        message: 'Notification 1',
        level: 'error',
        title: 'Notification 1 Title',
        autoDismiss: 0,
        id: 'notification-1',
      }))

      dispatch(showNotification({
        message: 'Notification 2',
        level: 'error',
        title: 'Notification 2 Title',
        autoDismiss: 0,
        id: 'notification-2',
      }))

      dispatch(showNotification({
        message: 'Notification New',
        level: 'error',
        title: 'Notification New Title',
        autoDismiss: 0,
      }))

      // "notification-2" will never be shown as it is removed.
      dispatch(removeNotificationById('notification-2'))
    }

  render() {
    return (
      <div>
        <button onClick={this.dispatchNotificationActions}>Dispatch Notification Actions</button>
      </dev>
    )
  }
}

// connect is used to get dispatch method.
export default connect()(DispatchigExample)