react-notification-center - npm Package Compare versions

Comparing version 0.2.2 to 0.2.3

lib/NotificationCenter.js

@@ -286,13 +286,10 @@ 'use strict';
     onScrollBottom: _react.PropTypes.func,
-    fetch: _react.PropTypes.func,
     position: _react.PropTypes.string,
     wordsInItem: _react.PropTypes.number,
-    noNotificationText: _react.PropTypes.string,
-    visible: _react.PropTypes.bool
+    noNotificationText: _react.PropTypes.string
 };
 ReduxModal.defaultProps = {
-    notificationTitle: 'React notifications center',
+    notificationTitle: 'React notification center',
     position: 'left',
     wordsInItem: 50,
-    visible: true,
     noNotificationText: 'No data available, enjoy your day',
@@ -299,0 +296,0 @@ mapToItem: {},

package.json

 {
   "name": "react-notification-center",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "react-notification-center keep all your notification in a single place",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

 ## 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/)
+## `react-notification-center` [demo](http://diegoddox.github.io/react-notification-center/)
 
-#### Implementation Guide
+### Implementation Guide
 
-##### 1: Installation
+#### 1: Installation
 `npm install --save react-notification-center`
 
-##### 2: Import the less file to your app
+#### 2: Import the less file to your project
 `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`
-
+#### 3 Add the notification component
 ```
 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: [{
+            id: 1,
+            title: 'some title', // not required
+            message: 'The notification text', 
+            read: false, // if the user has read the notification
+            tags: [{ // not required
                 type: 'success',
                 text: 'text'
             }],
-            startDate: '09/12/2016'
+            date: '09/12/2016' // not required
         }];
     }
-
-	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({...})
+    componentDidMount() {
+        /* In case you wanna push a notification
+         * without update your component state
+         * you can use the `notify` method.
+         */
+        setTimeout(() => {
+           notify.add({...}); 
+        }, 1000);
     }
-    
+   
     render() {
@@ -67,7 +50,9 @@ return (
 	                 notifications={this.notifications}
-                     notificationTitle={'Header title'}
-	                 onNotificatioOpen={() => console.log('Notification has open')}
-	                 onNotificatioClose={() => console.log('Notification has close')}
-	                 onItemClick={this.onNotificationItemClick.bind(this)}
-	                 mapToItem={this.mpaToNotificationItem}/>
+                     notificationTitle={'React notification center'}
+                     noNotificationText={'No notifications. Go home!'}
+                     onScrollBottom={() => console.log('You are on the bottom babay :D')}
+                     onItemClick={item => console.log('## item clicked', item)}
+                     onNotificatioOpen={items => console.log('## all notifications', items)}
+                     onNotificatioClose={items => console.log('## all notifications', items)}
+                     customItemComponent={ReactComponent} // In case you don't wanna use the default item component
                </div>
@@ -79,21 +64,38 @@ </div>
 ```
-That is it :D
+In case you wanna control the notification-icon position you can do it by accessing the `react-notification-center` `css` `class`.
 
-#### Data structure.
+#### Notification tag types
+`success` `info` `warning` and `danger`
+
+#### You hate the notification data structure I've created :D
+ok ok don't panic, you don't have the same data structure and you don't wanna map your current data here is what your can do. Just use the `mapToItem` `props`
+
 ```
-{
-    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'
-    }]
+this.mapDataToItems = {
+    id: '_id',
+    title: 'name',
+    message: 'text',
+    read: 'hasRead',
+    date: 'createAt'
 }
+
+<ReactNotificationCenter
+    {...}
+    mapToItem={this.mapDataToItems} />
 ```
 
+Sorry but you cannot map `tags` at the moment :(
 
+#### You still don't get it `o.O`
+In case I fail to explain you on how to set up in your project!
+
+clone the repo
+`git clone https://github.com/diegoddox/react-notification-center.git` 
+`cd react-notification-center`
+`npm i` or `npm install`
+`npm start`
+
+and take a look at the file `developement/App.js`
+
 ### TODO:
-improve the documentation.
+improve documentation.

src/NotificationCenter.js

@@ -21,7 +21,5 @@ import React, {Component, PropTypes} from 'react';
         onScrollBottom: PropTypes.func,
-        fetch: PropTypes.func,
         position: PropTypes.string,
         wordsInItem: PropTypes.number,
-        noNotificationText: PropTypes.string,
-        visible: PropTypes.bool
+        noNotificationText: PropTypes.string
     };
@@ -33,3 +31,2 @@
         wordsInItem: 50,
-        visible: true,
         noNotificationText: 'No data available, enjoy your day',
@@ -36,0 +33,0 @@ mapToItem: {},

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

Number of lines in readme file

100

increased by2.04%

Worsened metrics

Total package byte prevSize

49387

decreased by-0.56%

Lines of code

799

decreased by-0.75%

No dependency changes