react-notification-system-redux

WebJar for react-notification-system-redux

License

License

MIT
Categories

Categories

React User Interface Web Frameworks
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

react-notification-system-redux
Last Version

Last Version

1.2.0
Release Date

Release Date

Type

Type

jar
Description

Description

react-notification-system-redux
WebJar for react-notification-system-redux
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/gor181/react-notification-system-redux

Download react-notification-system-redux

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/react-notification-system-redux/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>react-notification-system-redux</artifactId>
    <version>1.2.0</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/react-notification-system-redux/
implementation 'org.webjars.npm:react-notification-system-redux:1.2.0'
// https://jarcasting.com/artifacts/org.webjars.npm/react-notification-system-redux/
implementation ("org.webjars.npm:react-notification-system-redux:1.2.0")
'org.webjars.npm:react-notification-system-redux:jar:1.2.0'
<dependency org="org.webjars.npm" name="react-notification-system-redux" rev="1.2.0">
  <artifact name="react-notification-system-redux" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='react-notification-system-redux', version='1.2.0')
)
libraryDependencies += "org.webjars.npm" % "react-notification-system-redux" % "1.2.0"
[org.webjars.npm/react-notification-system-redux "1.2.0"]

Dependencies

compile (2)

Group / Artifact Type Version
org.webjars.npm : prop-types jar [15.6.0,16)
org.webjars.npm : react-notification-system jar [0.2.0,0.3)

Project Modules

There are no modules declared in this project.

build status version downloads license

react-notification-system-redux

Wraps react-notification-system into a component and exposes actions and reducer.

Open for PR's and contributions!

Use versions below v2.0.0 for react versions lower than 16.

Demo & Examples

Live demo: gor181.github.io/react-notification-system-redux

To build the examples locally, run:

npm install
npm start

Then open localhost:8000 in a browser.

Installation via NPM

npm install react-notification-system-redux react-notification-system --save

Usage

Import the reducer and pass it to your store:

import {createStore, combineReducers} from 'redux';

import {reducer as notifications} from 'react-notification-system-redux';

export function configureStore(initialState = {}) {
  return createStore(
    combineReducers({
      notifications
    }),
    initialState
  );
}

Include the Notifications component and pass the data from the reducer by using connect:

import React, {PropTypes} from 'react';
import {connect} from 'react-redux';
import ReactDOM from 'react-dom';

import Notifications from 'react-notification-system-redux';

class DemoComponent extends React.Component {

  render() {
    const {notifications} = this.props;

    //Optional styling
    const style = {
      NotificationItem: { // Override the notification item
        DefaultStyle: { // Applied to every notification, regardless of the notification level
          margin: '10px 5px 2px 1px'
        },

        success: { // Applied only to the success notification item
          color: 'red'
        }
      }
    };

    return (
      <Notifications
        notifications={notifications}
        style={style}
      />
    );
  }
}

DemoComponent.contextTypes = {
  store: PropTypes.object
};

DemoComponent.propTypes = {
  notifications: PropTypes.array
};

export default connect(
  state => ({ notifications: state.notifications })
)(DemoComponent);

Dispatch notification actions from any other component:

import React, {PropTypes} from 'react';
import ReactDOM from 'react-dom';

import Notifications, { success } from 'react-notification-system-redux';

const notificationOpts = {
  // uid: 'once-please', // you can specify your own uid if required
  title: 'Hey, it\'s good to see you!',
  message: 'Now you can see how easy it is to use notifications in React!',
  position: 'tr',
  autoDismiss: 0,
  action: {
    label: 'Click me!!',
    callback: () => alert('clicked!')
  }
};

class OtherComponent extends React.Component {

  constructor() {
    super();

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.context.store.dispatch(
      success(notificationOpts)
    );
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>
          Spawn some notifications!!!
        </button>
      </div>
    );
  }
}

OtherComponent.contextTypes = {
  store: PropTypes.object
};

export default OtherComponent;

There is a working example in example/src/**

Properties

It accepts all properties as react-notification-system does, actually it pipes them in the react-notification-system.

Actions

import Notifications from 'react-notification-system-redux';

dispatch(Notifications.show(notification, level));
dispatch(Notifications.success(notification));
dispatch(Notifications.error(notification));
dispatch(Notifications.warning(notification));
dispatch(Notifications.info(notification));
dispatch(Notifications.hide(uid)); // Hides notification based on uid
dispatch(Notifications.removeAll()); // Removes all notifications

// OR //

import { show, success, error, warning, info, hide, removeAll } from 'react-notification-system-redux';

dispatch(show(notification, level));
dispatch(success(notification));
dispatch(error(notification));
dispatch(warning(notification));
dispatch(info(notification));
dispatch(hide(uid)); // Hides notification based on uid
dispatch(removeAll()); // Removes all notifications

Development (src, lib and the build process)

NOTE: The source code for the component is in src. A transpiled CommonJS version (generated with Babel) is available in lib for use with node.js, browserify and webpack. A UMD bundle is also built to dist, which can be included without the need for any build system.

To build, watch and serve the examples (which will also watch the component source), run npm start. If you just want to watch changes to src and rebuild lib, run npm run watch (this is useful if you are working with npm link).

Thanks

Jed Watson for making react-component yo builder!

License

MIT Licensed
Copyright (c) 2016 Goran Udosic

Versions

Version
1.2.0
1.0.11