@juice789/redux-saga-notifications v1.1.2

Redux-Saga-Notifications

A simple React notification component. Features:

✅ Reducer + Saga included
✅ Custom styles
✅ Styled components theme support
✅ Button controls to confirm a notification (optional) + action forwarding

Installation

npm install @juice789/redux-saga-notifications

Demo

Open demo

Usage

See example app in demo/src folder

import {
  notificationSaga,
  notificationReducer
} from '@juice789/redux-saga-notifications'

//add the saga inside rootSaga
//add the reducer in the rootReducer

import Notifications from '@juice789/redux-saga-notifications'

const App = () => (
  <>
    <div>Include the Notifications component in your app</div>
    <Notifications />
  </>
)

Props

Dispatching a notification

store.dispatch({
  type: 'NOTIFICATION_PUSH',
  notification: {
    id: Date.now(),
    type: 'success',
    label: 'Test notification 1',
    duration: 10000
  }
})

Dispatching a notification with button controls

store.dispatch({
  type: 'NOTIFICATION_PUSH',
  notification: {
    id: Date.now(),
    type: 'error',
    label: 'Test notification 2',
    buttons: 'ok' //valid options: 'yesNo' or 'ok'
  }
})

Forwarding a custom action after the notification is confirmed

store.dispatch({
  type: 'NOTIFICATION_PUSH',
  notification: {
    id: Date.now(),
    type: 'info',
    label: 'Test notification 3',
    payload: {
      type: 'NOTIFICATION_WAS_CONFIRMED',
      foo: 'bar'
    },
    buttons: 'yesNo' //after the yes button is clicked, the payload is dispatched
  }
})

The properties of the notification object:

Complete styling example

import Notifications, {
  createNotificationStyle
} from '@juice789/redux-saga-notifications'

const styles = {
  container: (defaults) => ({
    ...defaults,
    alignItems: 'flex-end'
  }),
  containerInner: (defaults) => ({
    ...defaults,
    bottom: '45px'
  }),
  overlay: (defaults) => ({
    ...defaults,
    background: 'darkgray'
  }),
  //add a custom notification type and style it with createNotificationStyle
  customStyle1: createNotificationStyle('purple', 'fuchsia', true),//returns a complete notification style object, just set the colors
  //or set every style property manually
  customStyle2: {
    notification: (defaults) => ({
      ...defaults,
      background: 'burlywood'
    }),
    notificationInner: (defaults) => ({
      ...defaults,
      minHeight: '100px'
    }),
    icon: (defaults) => ({
      ...defaults,
      fontSize: '40px',
    }),
    label: (defaults) => ({
      ...defaults,
      color: 'brown'
    }),
    buttonsOuter: (defaults) => ({
      ...defaults,
      background: 'red'
    }),
    button: (defaults) => ({
      ...defaults,
      fontSize: '20px'
    })
  },
    //overriding the default 'error' notification type
  error: {
    ...createNotificationStyle(
      'red', //primary color
      'blue', //secondary color
      true //set to false to disable animations
    ),
    label: (defaults) => ({
      ...defaults,
      color: 'black',
      fontSize: '20px'
    })
  }
}

const icons = {
  customStyle1: <>🐼</>,
  customStyle2: <>🥒</>,
  success: null, //don't use icon for success notification type,
  error: <FontAwesomeIcon icon={faAmbulance} /> //use an icon from your favourite icon library (font awesome, line awesome etc.)
}

const App = () => <Notifications styles={styles} icons={icons}  />

License

MIT