diff --git a/.jshintignore b/.jshintignore
new file mode 100644
index 0000000..3c3629e
--- /dev/null
+++ b/.jshintignore
@@ -0,0 +1 @@
+node_modules
diff --git a/.jshintrc b/.jshintrc
new file mode 100644
index 0000000..997b3f7
--- /dev/null
+++ b/.jshintrc
@@ -0,0 +1,10 @@
+{
+  "node": true,
+
+  "curly": true,
+  "latedef": true,
+  "quotmark": true,
+  "undef": true,
+  "unused": true,
+  "trailing": true
+}
diff --git a/package.json b/package.json
index a1e3951..a6a3277 100644
--- a/package.json
+++ b/package.json
@@ -41,19 +41,20 @@
     "browser-test-cover": "rc-tools run browser-test-cover"
   },
   "devDependencies": {
-    "expect.js": "0.3.x",
-    "pre-commit": "1.x",
-    "rc-server": "3.x",
-    "rc-tools": "4.x",
-    "react": "~0.14.0",
-    "react-addons-test-utils": "~0.14.1",
-    "react-dom": "~0.14.0"
+    "expect.js": "~0.3.1",
+    "precommit-hook": "~3.0.0",
+    "rc-server": "~3.3.4",
+    "rc-tools": "~4.4.1",
+    "react": "~0.14.3",
+    "react-addons-test-utils": "^0.14.3",
+    "react-dom": "~0.14.3"
   },
-  "pre-commit": [
+  "precommit": [
     "lint"
   ],
   "dependencies": {
-    "rc-animate": "2.x",
-    "rc-util": "3.x"
+    "classnames": "~2.2.1",
+    "rc-animate": "~2.0.2",
+    "rc-util": "~3.1.2"
   }
 }
diff --git a/src/Notice.jsx b/src/Notice.jsx
index 1b2097c..3347350 100644
--- a/src/Notice.jsx
+++ b/src/Notice.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {classSet} from 'rc-util';
+import classNames from 'classnames';
 
 const Notice = React.createClass({
   propTypes: {
@@ -57,7 +57,7 @@ const Notice = React.createClass({
       [props.className]: !!props.className,
     };
     return (
-      <div className={classSet(className)} style={props.style}>
+      <div className={classNames(className)} style={props.style}>
         <div className={`${componentClass}-content`}>{this.props.children}</div>
         {props.closable ?
           <a tabIndex="0" onClick={this.close} className={`${componentClass}-close`}>
diff --git a/src/Notification.js b/src/Notification.js
new file mode 100644
index 0000000..95995e9
--- /dev/null
+++ b/src/Notification.js
@@ -0,0 +1,99 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import classNames from 'classnames';
+import Animate from 'rc-animate';
+import {createChainedFunction} from 'rc-util';
+import Notice from './Notice';
+
+let seed = 0;
+const now = Date.now();
+
+function getUuid() {
+  return 'rcNotification_' + now + '_' + (seed++);
+}
+
+const Notification = React.createClass({
+  getDefaultProps() {
+    return {
+      prefixCls: 'rc-notification',
+      animation: 'fade',
+      style: {
+        'top': 65,
+        left: '50%',
+      },
+    };
+  },
+
+  getInitialState() {
+    return {
+      notices: [],
+    };
+  },
+
+  getTransitionName() {
+    const props = this.props;
+    let transitionName = props.transitionName;
+    if (!transitionName && props.animation) {
+      transitionName = `${props.prefixCls}-${props.animation}`;
+    }
+    return transitionName;
+  },
+
+  add(notice) {
+    const key = notice.key = notice.key || getUuid();
+    const notices = this.state.notices;
+    if (!notices.filter((v) => v.key === key).length) {
+      this.setState({
+        notices: notices.concat(notice),
+      });
+    }
+  },
+
+  remove(key) {
+    const notices = this.state.notices.filter((notice) => {
+      return notice.key !== key;
+    });
+    this.setState({
+      notices: notices,
+    });
+  },
+
+  render() {
+    const props = this.props;
+    const noticeNodes = this.state.notices.map((notice)=> {
+      const onClose = createChainedFunction(this.remove.bind(this, notice.key), notice.onClose);
+      return (<Notice prefixCls={props.prefixCls} {...notice} onClose={onClose}>{notice.content}</Notice>);
+    });
+    const className = {
+      [props.prefixCls]: 1,
+      [props.className]: !!props.className,
+    };
+    return (
+      <div className={classNames(className)} style={props.style}>
+        <Animate transitionName={this.getTransitionName()}>{noticeNodes}</Animate>
+      </div>
+    );
+  },
+});
+
+Notification.newInstance = (props) => {
+  const notificationProps = props || {};
+  const div = document.createElement('div');
+  document.body.appendChild(div);
+  const notification = ReactDOM.render(<Notification {...notificationProps}/>, div);
+  return {
+    notice(noticeProps) {
+      notification.add(noticeProps);
+    },
+    removeNotice(key) {
+      notification.remove(key);
+    },
+    component: notification,
+    destroy() {
+      React.unmountComponentAtNode(div);
+      document.body.removeChild(div);
+    },
+  };
+};
+
+export default Notification;
diff --git a/tests/index.spec.js b/tests/index.spec.js
index 074a7e9..ef2dd60 100644
--- a/tests/index.spec.js
+++ b/tests/index.spec.js
@@ -1,25 +1,26 @@
-const Notification = require('../');
 const React = require('react');
 const TestUtils = require('react-addons-test-utils');
 const expect = require('expect.js');
+const Notification = require('../');
+
 require('../assets/index.css');
 
-describe('rc-notification', function() {
-  it('works', function(done) {
+describe('rc-notification', () => {
+  it('works', (done) => {
     const notification = Notification.newInstance();
     notification.notice({
       content: <p className="test">1</p>,
       duration: 0.1,
     });
     expect(TestUtils.scryRenderedDOMComponentsWithClass(notification.component, 'test').length).to.be(1);
-    setTimeout(function() {
+    setTimeout(() => {
       expect(TestUtils.scryRenderedDOMComponentsWithClass(notification.component, 'test').length).to.be(0);
       notification.destroy();
       done();
     }, 1000);
   });
 
-  it('destroy works', function() {
+  it('destroy works', () => {
     const notification = Notification.newInstance();
     notification.notice({
       content: <p id="test" className="test">222222</p>,