react-notification-center - npm Package Compare versions

Comparing version 0.1.2 to 0.2.0

package.json

 {
   "name": "react-notification-center",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "react-notification-center keep all your notification in a single place",
@@ -11,4 +11,4 @@ "main": "lib/index.js",
     "build": "better-npm-run build",
-    "less": "node_modules/.bin/lessc src/notification/less/index.less --autoprefix=\"last 2 versions\" lib/css/react-redux-notification.css",
-    "less:m": "node_modules/.bin/lessc src/notification/less/index.less --autoprefix=\"last 2 versions\" --clean-css lib/css/react-redux-notification.min.css",
+    "less": "node_modules/.bin/lessc src/less/index.less --autoprefix=\"last 2 versions\" lib/css/react-redux-notification.css",
+    "less:m": "node_modules/.bin/lessc src/less/index.less --autoprefix=\"last 2 versions\" --clean-css lib/css/react-redux-notification.min.css",
     "clean": "better-npm-run clean",
@@ -37,6 +37,6 @@ "lint": "better-npm-run lint",
     "build": {
-      "command": "node_modules/.bin/babel src/notification/ --out-dir lib"
+      "command": "node_modules/.bin/babel src/ --out-dir lib"
     },
     "build:w": {
-      "command": "node_modules/.bin/babel -w src/notification/ --out-dir lib"
+      "command": "node_modules/.bin/babel -w src/ --out-dir lib"
     },
@@ -125,5 +125,4 @@ "lint": {
     "classnames": "^2.2.3",
-    "eventemitter3": "^1.1.1",
-    "uuid": "^2.0.1"
+    "eventemitter3": "^1.1.1"
   }
 }

README.md

@@ -1,2 +0,96 @@
-# react-notification-center [demo](http://diegoddox.github.io/react-notification-center/)
-documentation coming soon.
+## NOTE:
+This is not well documented but it will give you an idea on how to start
+#### `react-notification-center` [demo](http://diegoddox.github.io/react-notification-center/)
+
+#### Implementation Guide
+
+##### 1: Installation
+`npm install --save react-notification-center`
+
+##### 2: Import the less file to your app
+`import 'react-notification-center/src/less/index.less'`
+
+##### 3 Add the notification component
+
+before we keep on we need to talk about the notification data structure.
+
+The `notification item component` expect an `id`, `title`, `message`, `read` and `date`, but assuming that in your data you don't have the `message` variable but instead you have `text` as the notification message and you're too lazy to manipulate your data, here is what you can do, use the `mapToItem` `props`
+
+```
+import ReactNotificationCenter, {notify} from 'react-notification-center';
+export default class App extends Component {
+    constructor(props) {
+        super(props);
+		
+		// map those variable with your data structure if necessary
+        this.mpaToNotificationItem = {
+            id: '_id',
+            title: 'title' // name are equal so you don't need. :D
+            message: 'text',
+            read: 'active',
+            date: 'startDate'
+        };
+
+        this.notifications = [{
+            _id: 1,
+            title: 'some title',
+            text: 'some long text', // this will be cut on the notification item list
+            active: false,
+            tags: [{
+                type: 'success',
+                text: 'text'
+            }],
+            startDate: '09/12/2016'
+        }];
+    }
+
+	onNotificationItemClick(item) {
+		/* Here you can make a ajax and tell your server
+         * that the user has read this notification.
+		 */
+	}
+    
+    addMoreData() {
+        /* In case you wanna add more data without modifying
+         * your react component state you case use the 'notify'
+         * method to add more data in to the `react-notification-center` `state`
+		 */
+         notify.add({...})
+    }
+    
+    render() {
+        return (
+            <div className="wrapper">
+                <div className="your-notification-holder-class">
+	             <ReactNotificationCenter
+	                 notifications={this.notifications}
+	                 onNotificatioOpen={() => console.log('Notification has open')}
+	                 onNotificatioClose={() => console.log('Notification has close')}
+	                 onItemClick={this.onNotificationItemClick.bind(this)}
+	                 mapToItem={this.mpaToNotificationItem}/>
+               </div>
+            </div>
+        );
+    }
+}
+```
+That is it :D
+
+#### Data structure.
+```
+{
+    id: 1 // is required,
+    title: 'the notification title', // not required
+    message: 'My message', // you don't need but what is a notification without a message :D
+    read: false, // is required, We will use this for mark which item has been read,
+    date: '02/12/2016', // not required
+    tags: [{ // not required. This is in case you wanna tell the user the notification purpose
+        type: 'info', // types of tags: success, info, warning and danger
+        text: 'my tag text'
+    }]
+}
+```
+
+
+### TODO:
+improve the documentation.

src/index.js

@@ -1,5 +0,5 @@
-import ReactNotification from './ReactNotification';
+import ReactNotificationCenter from './NotificationCenter';
 import {EEmitter} from './emitter';
 
-export default ReactNotification;
+export default ReactNotificationCenter;
 export const notify = EEmitter;

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

49607

increased by111.7%

Dependency count

2

decreased by-33.33%

Number of package files

24

increased by60%

Lines of code

805

increased by150%

Number of lines in readme file

97

increased by4750%

Dependency changes

• - Removeduuid@^2.0.1

• - Removeduuid@2.0.3(transitive)