redux-toastr - npm Package Compare versions

Comparing version 0.2.3 to 0.3.0

lib/ToastrBox.js

@@ -233,3 +233,3 @@ 'use strict';
 ToastrBox.defaultProps = {
-  timeOut: 4000,
+  timeOut: 5000,
   transition: {
@@ -236,0 +236,0 @@ in: 'bounceIn',

package.json

 {
   "name": "redux-toastr",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "description": "redux-toastr is a toastr message implemented with Redux",
@@ -11,3 +11,3 @@ "main": "lib/index.js",
     "lint": "eslint . --ext .js --ext .jsx || true",
-    "less": "lessc src/less/redux-toastr.less --clean-css lib/css/redux-toastr.min.css && lessc src/less/redux-toastr.less lib/css/redux-toastr.css",
+    "less": "lessc src/less/redux-toastr.less --clean-css lib/css/redux-toastr.min.css",
     "clean": "node_modules/.bin/rimraf dist lib"
@@ -14,0 +14,0 @@ },

README.md

@@ -10,3 +10,3 @@ `redux-toastr` is a toastr message implemented with [Redux](https://github.com/rackt/redux), primary consists of three things: a Redux reducer, `redux-toastr` toastr emitter and a React component.
 
-`npm install --save redux-toastr` or `npm i --save redux-toastr`
+`npm install --save redux-toastr`
 
@@ -16,21 +16,9 @@ ##### 2. Link `redux-toastr` styles to your app
 ```
-<link href="http://diegoddox.github.io/redux-toastr/css/redux-toastr.min.css" rel="stylesheet" type="text/css">
+<link href="http://diegoddox.github.io/redux-toastr/0.3.0/css/redux-toastr.min.css" rel="stylesheet" type="text/css">
 ```
-##### NOTE: I'm using google font
-```
-<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet" type="text/css">
-```
-but you can use the font you want just include the font and change the css.
+##### 3. The third thing you need to do is to add the `redux-toastr` reducer to Redux.
 
 ```
-.redux-toastr-message-holder {
-  font-family: 'You font name here', sans-serif;
-}
-```
-
-##### 3. The third thing you need to do is to add the `redux-toastr` `reducer to Redux.
-
-```
-import {createStore, combineReducers} from 'redux';
-import {reducer as toastrReducer}     from 'redux-toastr';
+import {createStore, combineReducers} from 'redux'
+import {reducer as toastrReducer} from 'redux-toastr'
 const reducers = {
@@ -40,4 +28,4 @@ // ... other reducers ...
 }
-const reducer = combineReducers(reducers);
-const store = createStore(reducer);
+const reducer = combineReducers(reducers)
+const store = createStore(reducer)
 ```
@@ -47,3 +35,3 @@
 
-##### 4. Add the `redux-toastr` component to the root of your app
+##### 4. Add the `redux-toastr` React component to the root of your app
 
@@ -64,12 +52,6 @@ ```
 ```
-import React, {Component, PropTypes}  from 'react';
-import {toastr}                       from 'redux-toastr';
+import React, {Component}  from 'react'
+import {toastr} from 'redux-toastr'
 
-export class YouComponent extends Component {
-  static displayName = 'YouComponent'
-
-  constructor(props) {
-    super(props);
-  }
-
+export class YourComponent extends Component {
   render() {
@@ -79,43 +61,20 @@ return (
         <button
-          onClick={() => toastr.success('Lorem ipsum dolor sit amet')}
+          onClick={() => toastr.success('The title', 'The message')}
           type="button">Toastr Success</button>
       </div>
-    );
+    )
   }
 }
 ```
-
-but you can also bind the `actions` to your component if you prefer.
-
+Or you can bind the `actions` to your component if you prefer.
 ```
-import React, {Component, PropTypes}  from 'react';
-import {bindActionCreators}           from 'redux';
-import {actions as toastrActions}     from 'redux-toastr';
-
-export class YouComponent extends Component {
-  static displayName = 'YouComponent'
-
-  constructor(props) {
-    super(props);
-    this.toastr = bindActionCreators(toastrActions, this.props.dispatch); //<-- bind the actions to your component
-    this.handleOnClick = this.handleOnClick.bind(this);
-  }
-
-  handleOnClick(e) {
-    e.preventDefault();
-    this.toastr.success('Lorem ipsum dolor sit amet.');
-  }
-
-  render() {
-    return (
-      <div>
-        <button
-          onClick={e => this.handleOnClick(e)}
-          type="button">Toastr Success</button>
-      </div>
-    );
-  }
+import {bindActionCreators} from 'redux'
+import {actions as toastrActions} from 'redux-toastr'
+// In your React component
+constructor(props) {
+  super(props);
+  // Bind the redux-toastr actions to the component
+  this.toastr = bindActionCreators(toastrActions, this.props.dispatch)
 }
 ```
-
 ## Toastr method
@@ -127,3 +86,3 @@ `success` `info` `warning` `error`
 2. Passing two `string` arguments the first will be the `title` and the second the `message`
-3. You can pass the `message and the second argument can be the `options`
+3. You can pass the `message` and the second argument can be the `options`
 4. If you pass only one argument it will become the message 
@@ -136,17 +95,17 @@
 ```
-import {toastr} from 'redux-toastr';
-toastr.success('Title', 'Message', {timeOut: 7000, icon: 'icons'});
-toastr.info('The message', {timeOut: 7000, icon: 'icons'});
-toastr.warning('The message'});
-toastr.error('The message'});
+import {toastr} from 'redux-toastr'
+
+const toastrOptions = {
+  timeOut: number,
+  onShowComplete: func, // <-- When the animation-show is complete
+  onHideComplete: func, // <-- When the animation-hide is complete
+  icon: string // Custom icon
+}
+
+toastr.success('Title', 'Message', toastrOptions)
+toastr.info('The message', toastrOptions)
+toastr.warning('The title', 'The message')
+toastr.error('The message'})
 ```
 
-#### toastr method options
-| options          |         |
-| -----------------|:-------:|
-| `timeOut`        | number  |
-| `icon`           | string  |
-| `onShowComplete` | func    |
-| `onHideComplete` | func    |
-
 ##### Toastr icons
@@ -156,3 +115,12 @@ By default `redux-toastr` provides a icon for `success`, `info`, `warning` and `error`
 
+# Run a local demo
+```
+git clone https://github.com/diegoddox/redux-toastr.git
+cd redux-toastr/demo/
+npm install
+npm start
+```
+open your browser at `http://localhost:3000`
+
 # TODO
 create test.

src/ToastrBox.js

@@ -19,3 +19,3 @@ import CSSCore from 'fbjs/lib/CSSCore';
   static defaultProps = {
-    timeOut: 4000,
+    timeOut: 5000,
     transition: {
@@ -22,0 +22,0 @@ in: 'bounceIn',

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

5421254

increased by3746.42%

Number of package files

52

increased by62.5%

Worsened metrics

Lines of code

897

decreased by-29.98%

Number of lines in readme file

117

decreased by-21.48%

No dependency changes