		#3.0.0
		Remove dangerouslysetinnerhtml and implment component option.
		Remove `dangerouslysetinnerhtml` and implment `component` `option`.

		instead of use `dangerouslysetinnerhtml` you can pass on react component in the `toastr` `options` so is up to you what and how you wanna display your `toastr`
		instead of using the `dangerouslysetinnerhtml` now you can pass a react component in the `toastr` `options` so is up to you what and how you wanna display your `toastr`

		If you wanna contribute just fork the repo run `npm i`, `npm start` and you're ready

		#2.1.0
		@@ -9,0 +7,0 @@ change ReduxToastr props name from `confirm` to `confirmOptions`

package.json

		{
		"name": "react-redux-toastr",
		"version": "3.0.0",
		"version": "3.0.1",
		"description": "react-redux-toastr is a React toastr message implemented with Redux",
		@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

		@@ -100,3 +100,3 @@ ##`react-redux-toastr` [demo](http://diegoddox.github.io/react-redux-toastr/)
		onHideComplete: () => console.log('HIDE: animation is done'),
		component: React.Component({...})
		component: React.Component
		}
		@@ -118,3 +118,3 @@
		onHideComplete: () => console.log('HIDE: animation is done'),
		component: React.Component({...})
		component: React.Component
		};
		@@ -121,0 +121,0 @@ toastr.message('Title', toastrMessageOptions)

src/App.js

		@@ -5,3 +5,3 @@ 'use strict';
		import './toastr/less/index.less';
		import React, {Component, PropTypes} from 'react';
		import React, {Component, PropTypes, dangerouslySetInnerHTML} from 'react'; // eslint-disable-line no-unused-vars
		import {Provider} from 'react-redux';
		@@ -12,2 +12,3 @@ import ReduxToastr, {toastr} from './toastr/';

		import LongText from './largetext';
		import loremIpsum from 'lorem-ipsum';
		@@ -24,2 +25,9 @@

		class messageComp extends Component {
		static displayName = 'MMCmessageComp';
		render() {
		return <div dangerouslySetInnerHTML={{__html: LongText}} />;
		}
		}

		export default class App extends Component {
		@@ -54,6 +62,6 @@ static displayName = 'ReduxModalDev';
		<button type="button" onClick={this.add.bind(this)}>success</button>
		<button type="button" onClick={() => toastr.info('## Success', loremIpsum())}>info</button>
		<button type="button" onClick={() => toastr.info('## Info', loremIpsum())}>info</button>
		<button type="button" onClick={() => toastr.error('## Error', {timeOut: 4000, component: comp})}>error</button>
		<button type="button" onClick={() => toastr.warning('## Warning', loremIpsum())}>warning</button>
		<button type="button" onClick={() => toastr.message('## message', loremIpsum())}>message</button>
		<button type="button" onClick={() => toastr.message('## Message', {component: messageComp})}>message</button>
		</div>
		@@ -60,0 +68,0 @@ {this.renderDev()}

src/toastr/ToastrBox.js

		@@ -124,3 +124,7 @@ 'use strict';
		{this.props.item.message && <div className="message">{this.props.item.message}</div>}
		{this.props.item.options.component && <this.props.item.options.component />}
		{this.props.item.options.component &&
		<div className="message">
		<this.props.item.options.component />
		</div>
		}
		</div>
		@@ -127,0 +131,0 @@ </div>

react-redux-toastr - npm Package Compare versions

New alerts