react-redux-notify

A simple and flexible notifications component built with and for React and Redux, inspired by Atom Editor's Notifications.

Demo

Live demo: deep-c.github.io/react-redux-notify

Overview and Install

React redux notify is a simple yet flexible component for displaying notifications. You can simply include the component within your app and use the default settings or you can choose to customize it in many different ways. Easiest way to get up and running is to install it via npm.

npm install react-redux-notify --save

NOTE :Version ^4.0.0 requires react@^16.0.0, versions 3.x.x and below supports react@>=15.3.0 but has no portal support.

After which you can import the component and the default styles for use:

import 'react-redux-notify/dist/ReactReduxNotify.css';

The styles only need to imported once into your project, usually at the highest level component in which you wish to use Notify.

You can also use the standalone build by including the following css and js files (both minified and unminified exist). You will need to ensure that you have react, redux, react-redux dependecies also included externally.

<script src="https://unpkg.com/react-redux-notify/dist/ReactReduxNotify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/react-redux-notify/dist/ReactReduxNotify.min.css">

Demo and Example

An example can be seen by opening the examples/index.html file in your browser.

Usage

Import the reducer, which is the default export from the library, and add it to your redux store as key notifications.

import notifyReducer from 'react-redux-notify';

const reducers = combineReducers({ notifications: notifyReducer });
const store = createStore(reducers);

Add the Notify component to your application. There are a number of props you can pass into the Notify component that allow you to customize it (see Options below).

import { Notify } from 'react-redux-notify';

<Notify />

To create a notification import the createNotification action creator and dispatch it with your notification configuration obejct. The notification configuration object is just a plain object whose keys are passed along to the Notification component. By default there are 4 types of notifications SUCCESS, WARNING, ERROR and INFO.

import { connect } from 'react-redux';
import {createNotification, NOTIFICATION_TYPE_SUCCESS} from 'react-redux-notify';
const mySuccessNotification = {
  message: 'You have been logged in!',
  type: NOTIFICATION_TYPE_SUCCESS,
  duration: 0,
  canDismiss: true,
  icon: <i className="fa fa-check" />
}

class MyComponent extends React.Component {
  handleClick(){
    const {createNotification} = this.props;
    createNotification(mySuccessNotification);
  }

  render(){
    return (
      <div>
        <Notify />
        <button onClick={this.handleClick.bind(this)}>Dispatch Notification!</button>
      </div>
    )
  }
}

const mapDispatchToProps = dispatch => ({
  createNotification: (config) => {
      dispatch(createNotification(config))
  },
})

export default connect(null, mapDispatchToProps)(MyComponent)

Options

There are a number of options that can be used to change the look and behaviour of both the Notify component as well as the Notification component itself.

Notify Container Component

Notify Component Styles

This is the default style mapping created. You can choose to override these with your own classes using the customStyles prop explained above. You can view what these CSS classes do by default in the src/components/Notify/ folder for react-redux-notify in the node_modules directory.

{
  containerTopLeft:
  containerTopRight:
  containerBottomLeft:
  containerBottomRight:
  wrapper:
  enter:
  leave:
  notification-show:
  notification-hide:
  notification-shrink:
}

Furthermore since the positioning of the Notify component is done purely through css and the class is dynamically generated based on the container${position} props value, you can create your own unique position simply.

.CustomBottomPosition {
  ....
  ....
}

import {Notify} from 'react-redux-notify';
const myCustomStyles = {
  containerCustomBottomPosition: 'CustomBottomPosition'
}
<Notify customStyles={myCustomStyles} position={'CustomBottomPosition'}/>

Action creators

There are 3 action creators available which are all able to be imported from react-redux-notify.

Notification Component

The default notification component has the following configuration options which get passed as props when creating your notification object.

Notification Component Styles

This is the default style mapping created. You can choose to override these with your own classes using the customStyles prop explained above. You can view what these CSS classes do by default in the src/components/Notification/ folder for react-redux-notify in the node_modules directory.

{
  actionBtn:
  close:
  close-all:
  content:
  has-close:
  has-close-all:
  has-close-all--noDismiss:
  icon:
  item:
  item__btnBar:
  item__message:
  no-close:
  notification--error:
  notification--info:
  notification--success:
  notification--warning:
}

Contributing and Development

Changes and new ideas are always welcome.

git clone git@github.com:deep-c/react-redux-notify.git
cd react-redux-notify
npm install
npm start

# Uncomment these two lines from `./examples/index.html`
<!-- <link rel="stylesheet" href="https://github.com/deep-c/react-redux-notify/blob/master/./dist/ReactReduxNotify.css" /> -->
<!-- <script src="https://github.com/deep-c/react-redux-notify/raw/master/./dist/ReactReduxNotify.js"></script> -->
# Comment out these two lines from `./examples/index.html`
<link rel="stylesheet" href="https://unpkg.com/react-redux-notify/dist/ReactReduxNotify.min.css" />
<script src="https://unpkg.com/react-redux-notify/dist/ReactReduxNotify.min.js"></script>

To Do

• Test browser compatibility.
• Allow mounting reducer at custom key.
• Have an online demo page.
• Complete tests for Notify Component (awaiting react 15.4.0 see react issue).
• Support for use of inline styles. (Ive decided to not go ahead with this. If you think this is bad decision please feel free to open an issue for discussion, create a PR or use a custom notification component. )

License

MIT Copyright (c) 2016 Deeptesh Chagan