diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..72ac191
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,38 @@
+## Changelog
+
+- 0.14.0 Fix console warnings
+- 0.14.0 Added new event hook: `onToggled`
+- 0.13.1 Fix react warning of `maxCalculateTimes`
+- 0.13.0 Shows all of the text when `line` is falsely, add `maxCalculateTimes` to prevent infinite loop
+- 0.12.1 Update peerDependencies to support React 16
+- 0.12.0 Added new prop: `textElement` for customize text render
+- 0.11.2 Fix truncate incorrect in small size of width
+- 0.11.0 Added two event hooks: `onTruncated` and `onCalculated`
+- 0.10.4 Support inline style
+- 0.10.3 Downgrade peerDependencies to `^15.4.1`
+- 0.10.2 Fix truncated wrong when font property changed
+- 0.10.1 Fix unknown prop `element`
+- 0.10.0 Allow pass `element` to specify root element type
+- 0.9.3 Fix SSR window not found (removed raf polyfill)
+- 0.9.2 Fix styles prop is not working when the text is not truncated
+- 0.9.1 Fix async this.forceUpdate() issue
+- 0.9.0 Fix infinity loop bug, upgrade react to 15.5.4 and support yarn
+- 0.8.3 IE 11 compatibility
+- 0.8.2 Fix wrong truncating when a container has long words without spaces
+- 0.8.1 Fix `textTruncateChild` bug
+- 0.8.0 Drop `showTitle`, put `textTruncateChild` in same line if `tagName` is `A` or `SPAN`
+- 0.7.2 Server render will display all text
+- 0.7.1 Add new prop `containerClassName`
+- 0.7.0 Fix infinite update bug, drop raf
+- 0.6.2 Fix infinite loop bug
+- 0.6.1 Fix lib issue for browser
+- 0.6.0 Support React 15
+- 0.5.2 Fix server render bug
+- 0.5.1 Hide `textTruncateChild` when nothing truncated
+- 0.5.0 Add request animation frame
+- 0.4.0 New property `textTruncateChild` for show more or others
+- 0.3.7 Support CommonJS and UMD module loader
+- 0.3.5 Fix window resize issue
+- 0.3.4 supports Babel6
+- 0.2.0 supports React 0.14
+- 0.1.5 supports React 0.13.3 and below
diff --git a/README.md b/README.md
index 47521ce..9df20cc 100644
--- a/README.md
+++ b/README.md
@@ -35,44 +35,3 @@ var TextTruncate = require('react-text-truncate'); // CommonJS or UMD
 2. Will TextTruncate support IE10 or below?
 
     No! IE 10 and below are dead according to [Microsoft post](https://www.microsoft.com/en-us/WindowsForBusiness/End-of-IE-support).
-
-3. Uncaught ReferenceError: requestAnimationFrame is not defined
-
-    Please polyfill `requestAnimationFrame` before you called `<TextTruncated />`
-
-## Changelog
-
-* 0.13.1 Fix react warning of `maxCalculateTimes`
-* 0.13.0 Shows all of the text when `line` is falsely, add `maxCalculateTimes` to prevent infinite loop
-* 0.12.1 Update peerDependencies to support React 16
-* 0.12.0 Added new prop: `textElement` for customize text render
-* 0.11.2 Fix truncate incorrect in small size of width
-* 0.11.0 Added two event hooks: `onTruncated` and `onCalculated`
-* 0.10.4 Support inline style
-* 0.10.3 Downgrade peerDependencies to `^15.4.1`
-* 0.10.2 Fix truncated wrong when font property changed
-* 0.10.1 Fix unknown prop `element`
-* 0.10.0 Allow pass `element` to specify root element type
-* 0.9.3 Fix SSR window not found (removed raf polyfill)
-* 0.9.2 Fix styles prop is not working when the text is not truncated
-* 0.9.1 Fix async this.forceUpdate() issue
-* 0.9.0 Fix infinity loop bug, upgrade react to 15.5.4 and support yarn
-* 0.8.3 IE 11 compatibility
-* 0.8.2 Fix wrong truncating when a container has long words without spaces
-* 0.8.1 Fix `textTruncateChild` bug
-* 0.8.0 Drop `showTitle`, put `textTruncateChild` in same line if `tagName` is `A` or `SPAN`
-* 0.7.2 Server render will display all text
-* 0.7.1 Add new prop `containerClassName`
-* 0.7.0 Fix infinite update bug, drop raf
-* 0.6.2 Fix infinite loop bug
-* 0.6.1 Fix lib issue for browser
-* 0.6.0 Support React 15
-* 0.5.2 Fix server render bug
-* 0.5.1 Hide `textTruncateChild` when nothing truncated
-* 0.5.0 Add request animation frame
-* 0.4.0 New property `textTruncateChild` for show more or others
-* 0.3.7 Support CommonJS and UMD module loader
-* 0.3.5 Fix window resize issue
-* 0.3.4 supports Babel6
-* 0.2.0 supports React 0.14
-* 0.1.5 supports React 0.13.3 and below
diff --git a/lib/index.js b/lib/index.js
index 93b1d63..52251c1 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -106,6 +106,10 @@
           window.cancelAnimationFrame(_this.rafId);
         }
         _this.rafId = window.requestAnimationFrame(_this.update.bind(_this));
+      }, _this.onToggled = function (truncated) {
+        typeof _this.props.onToggled === 'function' && setTimeout(function () {
+          return _this.props.onToggled(truncated);
+        }, 0);
       }, _this.onTruncated = function () {
         typeof _this.props.onTruncated === 'function' && setTimeout(function () {
           return _this.props.onTruncated();
@@ -158,12 +162,13 @@
             line = _props.line,
             onCalculated = _props.onCalculated,
             onTruncated = _props.onTruncated,
+            onToggled = _props.onToggled,
             text = _props.text,
             textElement = _props.textElement,
             textTruncateChild = _props.textTruncateChild,
             truncateText = _props.truncateText,
             maxCalculateTimes = _props.maxCalculateTimes,
-            props = _objectWithoutProperties(_props, ['containerClassName', 'element', 'line', 'onCalculated', 'onTruncated', 'text', 'textElement', 'textTruncateChild', 'truncateText', 'maxCalculateTimes']);
+            props = _objectWithoutProperties(_props, ['containerClassName', 'element', 'line', 'onCalculated', 'onTruncated', 'onToggled', 'text', 'textElement', 'textTruncateChild', 'truncateText', 'maxCalculateTimes']);
 
         var scopeWidth = this.scope.getBoundingClientRect().width;
 
@@ -174,6 +179,7 @@
 
         // return if all of text can be displayed
         if (scopeWidth >= this.measureWidth(text)) {
+          this.onToggled(false);
           return (0, _react.createElement)(textElement, props, text);
         }
 
@@ -261,10 +267,12 @@
         }
 
         if (startPos === maxTextLength) {
+          this.onToggled(false);
           return (0, _react.createElement)(textElement, props, text);
         }
 
         this.onTruncated();
+        this.onToggled(true);
         return _react2.default.createElement(
           'div',
           props,
@@ -286,11 +294,12 @@
             line = _props2.line,
             onCalculated = _props2.onCalculated,
             onTruncated = _props2.onTruncated,
+            onToggled = _props2.onToggled,
             textElement = _props2.textElement,
             textTruncateChild = _props2.textTruncateChild,
             truncateText = _props2.truncateText,
             maxCalculateTimes = _props2.maxCalculateTimes,
-            props = _objectWithoutProperties(_props2, ['element', 'text', 'style', 'containerClassName', 'line', 'onCalculated', 'onTruncated', 'textElement', 'textTruncateChild', 'truncateText', 'maxCalculateTimes']);
+            props = _objectWithoutProperties(_props2, ['element', 'text', 'style', 'containerClassName', 'line', 'onCalculated', 'onTruncated', 'onToggled', 'textElement', 'textTruncateChild', 'truncateText', 'maxCalculateTimes']);
 
         var fontWeight = style.fontWeight,
             fontStyle = style.fontStyle,
@@ -321,6 +330,7 @@
     line: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.bool]),
     onCalculated: _propTypes2.default.func,
     onTruncated: _propTypes2.default.func,
+    onToggled: _propTypes2.default.func,
     text: _propTypes2.default.string,
     textElement: _propTypes2.default.node,
     textTruncateChild: _propTypes2.default.node,
diff --git a/package.json b/package.json
index e07effc..8e398a9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-text-truncate",
-  "version": "0.13.1",
+  "version": "0.14.1",
   "description": "Truncate text for React.js",
   "main": "lib/index.js",
   "scripts": {
diff --git a/src/App.js b/src/App.js
index 805be0b..1a18158 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,18 +1,19 @@
-import React, {Component} from 'react';
-import TextTruncate from './TextTruncate';
+import React, { Component } from "react";
+import TextTruncate from "./TextTruncate";
 
 export class App extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            text: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.',
+            text:
+                "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
             line: 2,
-            truncateText: '…',
+            truncateText: "…",
             appendTextTruncateChild: true
         };
     }
 
-    handleChange = (e) => {
+    handleChange = e => {
         this.setState({
             line: this.refs.line.value << 0,
             text: this.refs.text.value,
@@ -21,117 +22,193 @@ export class App extends Component {
         });
     };
 
-    onToggle = (e) => {
+    onToggle = e => {
         var display = this.refs.invisibleBlock.style.display;
-        this.refs.invisibleBlock.style.display = display === 'none' ? 'block' : 'none';
+        this.refs.invisibleBlock.style.display =
+            display === "none" ? "block" : "none";
         this.refs.invisibleTextTruncate.update();
     };
 
     render() {
-        const {
-            appendTextTruncateChild,
-            ...props
-        } = this.state;
+        const { appendTextTruncateChild, ...props } = this.state;
 
         if (appendTextTruncateChild) {
-            props.textTruncateChild = (
-                <a href='#'>Read On</a>
-            );
+            props.textTruncateChild = <a href="#">Read On</a>;
         }
 
         return (
-            <div className='row'>
-                <div className='col-md-6 col-xs-12'>
-                    <div className='form-group'>
-                        <label htmlFor='line'>Line</label>
-                        <input className='form-control' id='line' ref='line' onChange={this.handleChange} type='number' value={this.state.line} min={1} required/>
+            <div className="row">
+                <div className="col-md-6 col-xs-12">
+                    <div className="form-group">
+                        <label htmlFor="line">Line</label>
+                        <input
+                            className="form-control"
+                            id="line"
+                            ref="line"
+                            onChange={this.handleChange}
+                            type="number"
+                            value={this.state.line}
+                            min={1}
+                            required
+                        />
                     </div>
-                    <div className='form-group'>
-                        <label htmlFor='text'>Text</label>
-                        <textarea className='form-control' id='text' ref='text' onChange={this.handleChange} rows={5} value={this.state.text}></textarea>
+                    <div className="form-group">
+                        <label htmlFor="text">Text</label>
+                        <textarea
+                            className="form-control"
+                            id="text"
+                            ref="text"
+                            onChange={this.handleChange}
+                            rows={5}
+                            value={this.state.text}
+                        />
                     </div>
-                    <div className='form-group'>
-                        <label htmlFor='truncateText'>TruncateText</label>
-                        <input className='form-control' id='truncateText' ref='truncateText' onChange={this.handleChange} type='text' value={this.state.truncateText}/>
+                    <div className="form-group">
+                        <label htmlFor="truncateText">TruncateText</label>
+                        <input
+                            className="form-control"
+                            id="truncateText"
+                            ref="truncateText"
+                            onChange={this.handleChange}
+                            type="text"
+                            value={this.state.truncateText}
+                        />
                     </div>
-                    <div className='checkbox'>
-                        <label htmlFor='appendTextTruncateChild'>
-                            <input id='appendTextTruncateChild' ref='appendTextTruncateChild' onChange={this.handleChange} type='checkbox' checked={this.state.appendTextTruncateChild}/>Append TextTruncate child
+                    <div className="checkbox">
+                        <label htmlFor="appendTextTruncateChild">
+                            <input
+                                id="appendTextTruncateChild"
+                                ref="appendTextTruncateChild"
+                                onChange={this.handleChange}
+                                type="checkbox"
+                                checked={this.state.appendTextTruncateChild}
+                            />
+                            Append TextTruncate child
                         </label>
                     </div>
                 </div>
-                <div className='col-md-6 col-xs-12'>
+                <div className="col-md-6 col-xs-12">
                     <h4>Result</h4>
-                    <div id='sample-1'>
+                    <div id="sample-1">
                         <h5>1. Default</h5>
-                        <TextTruncate {...props}/>
+                        <TextTruncate {...props} />
                     </div>
-                    <div id='sample-2'>
+                    <div id="sample-2">
                         <h5>2. With floating image</h5>
-                        <div className='media'>
-                            <div className='media-left'>
-                                <img className='media-object' src='http://fakeimg.pl/64' width='64' height='64'/>
+                        <div className="media">
+                            <div className="media-left">
+                                <img
+                                    className="media-object"
+                                    src="http://fakeimg.pl/64"
+                                    width="64"
+                                    height="64"
+                                />
                             </div>
-                            <div className='media-body'>
-                                <TextTruncate {...props}/>
+                            <div className="media-body">
+                                <TextTruncate {...props} />
                             </div>
                         </div>
                     </div>
-                    <div id='sample-3'>
+                    <div id="sample-3">
                         <h5>3. Default hidden</h5>
-                        <div ref='invisibleBlock' style={{display: 'none'}}>
-                            <TextTruncate  ref='invisibleTextTruncate' {...props}/>
+                        <div ref="invisibleBlock" style={{ display: "none" }}>
+                            <TextTruncate
+                                ref="invisibleTextTruncate"
+                                {...props}
+                            />
                         </div>
-                        <button type='button' className='btn btn-default' onClick={this.onToggle}>Toggle show/hide</button>
+                        <button
+                            type="button"
+                            className="btn btn-default"
+                            onClick={this.onToggle}
+                        >
+                            Toggle show/hide
+                        </button>
                     </div>
-                    <div id='sample-4'>
+                    <div id="sample-4">
                         <h5>4. Customize class</h5>
-                        <TextTruncate {...props} containerClassName='text-danger'/>
+                        <TextTruncate
+                            {...props}
+                            containerClassName="text-danger"
+                        />
                     </div>
-                    <div id='sample-5'>
+                    <div id="sample-5">
                         <h5>5. Block-level textTruncateChild</h5>
-                        <TextTruncate {...props} textTruncateChild={<div>Block level child</div>}/>
+                        <TextTruncate
+                            {...props}
+                            textTruncateChild={<div>Block level child</div>}
+                        />
                     </div>
-                    <div id='sample-6'>
-                        <h5>6. Long words inside a small container (fixed 3 lines and width: 150px)</h5>
-                        <div style={{width: 150, background: '#ccc'}}>
-                            <TextTruncate line={3} text="Национал-Большевизм. Сталинская массовая культура и формирование русского национального самосознания (1931-1956)" />
+                    <div id="sample-6">
+                        <h5>
+                            6. Long words inside a small container (fixed 3
+                            lines and width: 150px)
+                        </h5>
+                        <div style={{ width: 150, background: "#ccc" }}>
+                            <TextTruncate
+                                line={3}
+                                text="Национал-Большевизм. Сталинская массовая культура и формирование русского национального самосознания (1931-1956)"
+                            />
                         </div>
                     </div>
-                    <div id='sample-7'>
+                    <div id="sample-7">
                         <h5>7. Event hook</h5>
-                        <TextTruncate {...props} onCalculated={() => console.log('onCalculated')} onTruncated={() => console.log('onTruncated')}/>
+                        <TextTruncate
+                            {...props}
+                            onCalculated={() => console.log("onCalculated")}
+                            onTruncated={() => console.log("onTruncated")}
+                        />
                     </div>
-                    <div id='sample-8'>
-                        <h5>8. Large concurrent text (fixed 3 lines and width: 200px) <a href="https://github.com/ShinyChang/React-Text-Truncate/issues/53">#53</a></h5>
-                        <div style={{width: 200, background: '#ccc'}}>
-                            <TextTruncate line={3} text="LoremIpsumissimplydummytextoftheprintingand typesettingindustry.fuhefjfvfjfkvjkvhjkjkvhjjhdfvjfhvjvj hfvjvfhjjhfjsfhjf ghj" />
+                    <div id="sample-8">
+                        <h5>
+                            8. Large concurrent text (fixed 3 lines and width:
+                            200px){" "}
+                            <a href="https://github.com/ShinyChang/React-Text-Truncate/issues/53">
+                                #53
+                            </a>
+                        </h5>
+                        <div style={{ width: 200, background: "#ccc" }}>
+                            <TextTruncate
+                                line={3}
+                                text="LoremIpsumissimplydummytextoftheprintingand typesettingindustry.fuhefjfvfjfkvjkvhjkjkvhjjhdfvjfhvjvj hfvjvfhjjhfjsfhjf ghj"
+                            />
                         </div>
                     </div>
-                    <div id='sample-9'>
+                    <div id="sample-9">
                         <h5>9. Non-spaced language (fixed width: 200px)</h5>
-                        <div style={{width: 200, background: '#ccc'}}>
-                            <TextTruncate {...props} text="中文測試中文測試中文測試中文測試中文測試中文測試中文測試中文測試中文測試中文測試中文測試中文測試" />
+                        <div style={{ width: 200, background: "#ccc" }}>
+                            <TextTruncate
+                                {...props}
+                                text="中文測試中文測試中文測試中文測試中文測試中文測試中文測試中文測試中文測試中文測試中文測試中文測試"
+                            />
                         </div>
                     </div>
-                    <div id='sample-10'>
+                    <div id="sample-10">
                         <h5>10. Custom text element</h5>
-                        <TextTruncate {...props} textElement={customTextRender} />
+                        <TextTruncate
+                            {...props}
+                            textElement={customTextRender}
+                        />
                     </div>
-                    <div id='sample-11'>
+                    <div id="sample-11">
                         <h5>11. Bold text</h5>
-                        <div style={{fontWeight: 'bold'}}>
-                        <TextTruncate {...props}/>
+                        <div style={{ fontWeight: "bold" }}>
+                            <TextTruncate {...props} />
                         </div>
                     </div>
                 </div>
             </div>
-        )
+        );
     }
 }
 
-const customTextRender = ({children}) => {
+const customTextRender = ({ children }) => {
     return (
-        <div>{children.split('').reverse().join('')}</div>
-    )
+        <div>
+            {children
+                .split("")
+                .reverse()
+                .join("")}
+        </div>
+    );
 };
diff --git a/src/TextTruncate.js b/src/TextTruncate.js
index 546dae2..1e32502 100644
--- a/src/TextTruncate.js
+++ b/src/TextTruncate.js
@@ -8,6 +8,7 @@ export default class TextTruncate extends Component {
     line: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
     onCalculated: PropTypes.func,
     onTruncated: PropTypes.func,
+    onToggled: PropTypes.func,
     text: PropTypes.string,
     textElement: PropTypes.node,
     textTruncateChild: PropTypes.node,
@@ -56,6 +57,10 @@ export default class TextTruncate extends Component {
     this.rafId = window.requestAnimationFrame(this.update.bind(this))
   };
 
+  onToggled = (truncated) => {
+    typeof this.props.onToggled === 'function' && setTimeout(() => this.props.onToggled(truncated), 0);
+  };
+
   onTruncated = () => {
     typeof this.props.onTruncated === 'function' && setTimeout(() => this.props.onTruncated(), 0);
   };
@@ -88,6 +93,7 @@ export default class TextTruncate extends Component {
       line,
       onCalculated,
       onTruncated,
+      onToggled,
       text,
       textElement,
       textTruncateChild,
@@ -105,6 +111,7 @@ export default class TextTruncate extends Component {
 
     // return if all of text can be displayed
     if (scopeWidth >= this.measureWidth(text)) {
+      this.onToggled(false);
       return createElement(textElement, props, text);
     }
 
@@ -192,10 +199,12 @@ export default class TextTruncate extends Component {
     }
 
     if (startPos === maxTextLength) {
+      this.onToggled(false);
       return createElement(textElement, props, text);
     }
     
     this.onTruncated();
+    this.onToggled(true);
     return (
       <div {...props}>
         {createElement(textElement, props, text.substr(0, startPos) + truncateText + ' ')}
@@ -213,6 +222,7 @@ export default class TextTruncate extends Component {
       line,
       onCalculated,
       onTruncated,
+      onToggled,
       textElement,
       textTruncateChild,
       truncateText,