Department Notifications Package

Drop in redux notifications for department.

Demo

Installation

npm i department-notifications --save

Usage

The package is based on redux, so you need to use the notificationsReducer in your store. Then you need to import the Notifications component somewhere near the root element.

const reducer = combineReducers({
  notifications: notificationsReducer
})

const App = () => (
  <section>
    <Notifications />
    <section className="contents">
      <p>App</p>
    </section>
  </section>
)

You can check the example directory for a small example.

Styling

There is an optional scss file, it is recommended to import it.

@import '~department-notifications/styles/notifications';

Sass variables

| Variable | Value | | --- | --- | | $notifications-width | 300px | | $notifications-corner-offset | 20px | | $notifications-font-size | 1.3 | | $notifications-font-weight | 600 | | $notifications-padding | 12px 17px | | $notifications-border-radius | 3px | | Colors | | $notifications-primary-bg-color | #3598CF | | $notifications-primary-color | #FFFFFF | | $notifications-success-bg-color | #1AB342 | | $notifications-success-color | #FFFFFF | | $notifications-warning-bg-color | #FF9800 | | $notifications-warning-color | #FFFFFF | | $notifications-danger-bg-color | #F33534 | | $notifications-danger-color | #FFFFFF |

Packages used:

• js
  • redux (notifications store)
  • react-addons-css-transition-group (notifications animations)
• css
  • department-base (common styles)

License

MIT