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