react-redux-alerts - npm Package Compare versions

Comparing version 1.5.7 to 1.5.8

lib/reducer.js

		@@ -58,2 +58,3 @@ 'use strict';
		};

		exports.default = alertReducer;

package.json

		{
		"name": "react-redux-alerts",
		"version": "1.5.7",
		"version": "1.5.8",
		"description": "A lightweight library for creating keyed alerts in a Redux app",
		@@ -5,0 +5,0 @@ "main": "./lib/index.js",

readme.md

		#react-redux-alerts

		>React Redux Alerts is redux based alert system designed for creating resuable alerts across your application. It consists of two things: a redux reducer and a React higher order component to keep track of when your alert is to render.

		## Installation
		```npm i react-redux-alerts --save```
		Simply run ```npm i react-redux-alerts --save``` to add to your project.

		## The Gist
		A redux based alert system designed for creating resuable alerts across your application.

		## Getting started with `react-redux-alerts`
		###Step 1
		The first thing to do is mount the 'react-redux-alerts' reducer to Redux. This only has to be done at startup. Make sure it's mounted to the alerts key.

		```js
		import { createStore, combineReducers } from 'redux';
		import { reducer as alertsReducer } from 'react-redux-alerts';

		const reducers = {
		alerts: alertsReducer
		};

		const reducer = conbineReducer(reducers);
		const store = createStore(reducer);

		```

		###Step 2
		Decoreate your alert component with `createAlert()`. This will provide your component with two props: `message` and `close()`. The first prop is passed in when the `createAction` is called and the second is a function that can be called from within your component to dimiss it.

		```js
		// Alert.js
		@@ -16,5 +35,6 @@

		const MyAlert = () => (
		<div>
		This is my custom alert message.
		const MyAlert = ({message, close}) => (
		<div className='myAlert'>
		{message}
		<button onClick={close}> Click to Dismiss me </button>
		</div>
		@@ -24,3 +44,3 @@ );
		/**
		* This is a wrapper method that connects your alert to the store based on a alertName key. This is the unique identifier that will allow you to both show the alert and dismiss the alert.
		* This is a wrapper method that connects your alert to the store based on a *alertName key. This is the unique identifier that will allow you to both show the alert and dismiss the alert.
		*/
		@@ -32,3 +52,4 @@ export default createAlert({

		This wrapped component can then be pluged into any container that you want the alert to show up in.
		This wrapped component can then be pluged into any container that you want the alert to show up in. To show the notification, simply dispatch the `createAlert` action with two arguments: the `alertName` and the `alertMessage`.
		To close, simply call the `dismissAlert` action with the correct key.

		@@ -50,3 +71,3 @@ ```js
		<MyAlert />
		<button onClick={() => this.props.createAlert('myAlert')}
		<button onClick={() => this.props.createAlert('myAlert', 'My Alert Message')}
		Create Alert!
		@@ -68,2 +89,2 @@ </button>
		```
		Using the react-redux-alert actions, you can dismiss or create notifications by passing the appropriate key to the action.

src/reducer.js

		@@ -45,2 +45,3 @@ import * as alertTypes from './constants';
		};

		export default alertReducer;

react-redux-alerts - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics