Use custom Notification component

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 example/dist
+./package-lock.json

README.md

@@ -96,6 +96,70 @@ const NotificationManager = window.ReactNotifications.NotificationManager;
 
 Example [here](https://codepen.io/minhtranite/pen/RgoaLL)
 
+### Custom notification component
+
+Use `notificationComponent` property to add user notification component.
+
+``` javascript
+<NotificationContainer notificationComponent={MyNotification} />
+```
+
+#### Example:
+
+You can use this with `react-intl`:
+
+``` javascript
+// IntlNotification.js
+
+import React from 'react'
+import PropTypes from 'prop-types'
+import Notification from 'react-notifications/lib/Notification'
+import {injectIntl, intlShape} from 'react-intl'
+import classnames from 'classnames'
+
+
+class IntlNotification extends Notification {
+    static propTypes = {
+        ...Notification.propTypes,
+        message: PropTypes.object.isRequired,
+        intl: intlShape.isRequired,
+    }
+
+    render() {
+        const {type} = this.props
+        let {title} = this.props
+        const className = classnames(['notification', `notification-${type}`])
+        const {formatMessage} = this.props.intl
+        title = title ? (<h4 className="title">{title}</h4>) : null
+        let message = this.props.message
+        message = formatMessage(message)
+        return (
+            <div className={className} onClick={this.handleClick}>
+                <div className="notification-message" role="alert">
+                    {title}
+                    <div className="message">{message}</div>
+                </div>
+            </div>
+        )
+    }
+}
+
+export default injectIntl(IntlNotification)
+
+```
+
+``` javascript
+<NotificationContainer notificationComponent={IntlNotification} />
+```
+
+And now you can send this message via notification manager instead of FormattedMessage component:
+
+```
+const msg = {id: 'my-string', defaultMessage: 'My string'}
+
+NotificationManager.info(msg, null, 3000)
+```
+
 ## NotificationContainer Props
 
 | Name | Type | Default | Required |

lib/NotificationContainer.js

@@ -71,7 +71,8 @@ var NotificationContainer = function (_React$Component) {
         enterTimeout: enterTimeout,
         leaveTimeout: leaveTimeout,
         notifications: notifications,
-        onRequestHide: this.handleRequestHide
+        onRequestHide: this.handleRequestHide,
+        notificationComponent: this.props.notificationComponent
       });
     }
   }]);
@@ -81,11 +82,13 @@ var NotificationContainer = function (_React$Component) {
 
 NotificationContainer.propTypes = {
   enterTimeout: _propTypes2.default.number,
-  leaveTimeout: _propTypes2.default.number
+  leaveTimeout: _propTypes2.default.number,
+  notificationComponent: _propTypes2.default.func
 };
 NotificationContainer.defaultProps = {
   enterTimeout: 400,
-  leaveTimeout: 400
+  leaveTimeout: 400,
+  notificationComponent: null
 };
 exports.default = NotificationContainer;
 module.exports = exports['default'];

lib/Notifications.js

@@ -70,6 +70,7 @@ var Notifications = function (_React$Component) {
       var className = (0, _classnames2.default)('notification-container', {
         'notification-container-empty': notifications.length === 0
       });
+      var NotificationComponent = this.props.notificationComponent || _Notification2.default;
       return _react2.default.createElement(
         'div',
         { className: className },
@@ -82,7 +83,7 @@ var Notifications = function (_React$Component) {
           },
           notifications.map(function (notification) {
             var key = notification.id || new Date().getTime();
-            return _react2.default.createElement(_Notification2.default, {
+            return _react2.default.createElement(NotificationComponent, {
               key: key,
               type: notification.type,
               title: notification.title,
@@ -104,13 +105,15 @@ Notifications.propTypes = {
   notifications: _propTypes2.default.array.isRequired,
   onRequestHide: _propTypes2.default.func,
   enterTimeout: _propTypes2.default.number,
-  leaveTimeout: _propTypes2.default.number
+  leaveTimeout: _propTypes2.default.number,
+  notificationComponent: _propTypes2.default.func
 };
 Notifications.defaultProps = {
   notifications: [],
   onRequestHide: function onRequestHide() {},
   enterTimeout: 400,
-  leaveTimeout: 400
+  leaveTimeout: 400,
+  notificationComponent: null
 };
 exports.default = Notifications;
 module.exports = exports['default'];