change to props beforeAnimate/afterAnimate callbacks

Author: bySabi

CHANGELOG.md

@@ -1,5 +1,9 @@
 ## master (unreleased)
 
+## 2.2.0
+
+- Add beforeAnimate/afterAnimate hooks to scroll handler
+
 ## 2.1.3
 
 - Fix incorrect passed props to tag

README.md

@@ -76,14 +76,24 @@ export default (props) => (
      * - this prop is required
      * - let it blank, `to = ''`, for scroll to page top
      */
-    to: PropTypes.string.isRequired
+    to: PropTypes.string.isRequired,
 
     /**
      * scroll smooth animation can be customize
      * Accepted options:
      *  { offset: 0, duration: 400, easing: easeOutQuad }
      */
-    animate: PropTypes.object
+    animate: PropTypes.object,
+
+    /**
+     * callback function triggered before scroll to #hash
+     */
+    beforeAnimate: PropTypes.func,
+
+    /**
+     * callback function triggered after scroll to #hash
+     */
+    afterAnimate: PropTypes.func
 }
 ```
 
@@ -107,6 +117,12 @@ This setting is equivalent to default jQuery.animate `easing: swing`
 * [Robert Penner's Easing Functions](http://robertpenner.com/easing/)
 * [Javascript source code](https://github.com/danro/jquery-easing/blob/master/jquery.easing.js)
 
+## `before` and `after` animate callbacks
+Use this callbacks to trigger behaviours like, for example, update state, load async stuffs, etc.
+```javascript
+<Scrollchor to="#aboutus" afterAnimate={() => updateState(this)}>Home</Scrollchor>
+```
+
 ## Example
 
 [react-scrollchor--example](https://github.com/bySabi/react-scrollchor/tree/example)

src/scrollchor.jsx

@@ -7,46 +7,40 @@ export default class Scrollchor extends React.Component {
     super(props);
     this._to = props.to && props.to.replace(/^#/, '') || '';
     const {
-      offset = 0, duration = 400, easing = easeOutQuad,
-      beforeHook = () => {},
-      afterHook = () => {}
+      offset = 0, duration = 400, easing = easeOutQuad
     } = props.animate || {};
-    this._beforeHook = beforeHook;
-    this._afterHook = afterHook;
     this._animate = { offset, duration, easing };
+    this._beforeAnimate = props.beforeAnimate || function() {};
+    this._afterAnimate = props.afterAnimate || function() {};
   }
 
   static propTypes = {
     to: PropTypes.string.isRequired,
     animate: PropTypes.shape({
       offset: PropTypes.number,
       duration: PropTypes.number,
-      easing: PropTypes.func,
-      beforeHook: PropTypes.func,
-      afterHook: PropTypes.func
-    })
+      easing: PropTypes.func
+    }),
+    beforeAnimate: PropTypes.func,
+    afterAnimate: PropTypes.func
   };
 
   handleClick = (event) => {
-    this._beforeHook(event);
-
+    this._beforeAnimate(event);
     event.preventDefault();
     animateScroll(this._to, this._animate);
-
-    this._afterHook(event);
+    this._afterAnimate(event);
   }
 
   render() {
-    const { to, animate, ...props } = this.props;  // eslint-disable-line no-unused-vars
+    const { to, animate, beforeAnimate, afterAnimate, ...props } = this.props;  // eslint-disable-line no-unused-vars
     return <a {...props} href={'#' + this._to} onClick={this.handleClick} />;
   }
 }
 
 function animateScroll(id, animate) {
   const element = id ? document.getElementById(id) : document.body;
-
   warning(element, `Cannot find element: #${id}`);
-
   scrollTo(element, animate);
 }
 
@@ -59,9 +53,7 @@ function scrollTo(element, { offset, duration, easing }) {
   function animate(elapsedTime) {
     const elapsed = elapsedTime + increment;
     const position = easing(null, elapsed, start, change, duration);
-
     setScrollTop(position);
-
     if (elapsed < duration) {
       setTimeout(function() {
         animate(elapsed);