add disableHistory pro

Author: bySabi

CHANGELOG.md

@@ -1,5 +1,9 @@
 ## master (unreleased)
 
+## 4.1.0
+
+- Add `disableHistory` prop for enable/disable update browser history with scroll behaviours. Default is `false`
+
 ## 4.0.0
 
 - Add support to changeable props. All props become responsive

README.md

@@ -95,6 +95,12 @@ export default (props) => (
      * @param1 Received click event
      */
     afterAnimate: PropTypes.func
+
+    /**
+     * enable/disable update browser history with scroll behaviours
+     * Default to `false`
+     */
+    disableHistory: PropTypes.bool
 }
 ```
 ### Reactive `props`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-scrollchor",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "A React component for scroll to #hash links with smooth animations",
   "files": [
     "lib"

src/scrollchor.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { animateScroll } from './utils';
+import { animateScroll, updateHistory } from './utils';
 
 export default class Scrollchor extends React.Component {
-  constructor(props) {
+  constructor (props) {
     super(props);
     this._setup(props);
     this.simulateClick = this._handleClick;
@@ -17,8 +17,9 @@ export default class Scrollchor extends React.Component {
       easing: PropTypes.func
     }),
     beforeAnimate: PropTypes.func,
-    afterAnimate: PropTypes.func
-  };
+    afterAnimate: PropTypes.func,
+    disableHistory: PropTypes.bool
+  }
 
   _setup = props => {
     this._to = (props.to && props.to.replace(/^#/, '')) || '';
@@ -30,23 +31,25 @@ export default class Scrollchor extends React.Component {
     } =
       props.animate || {};
     this._animate = { offset, duration, easing };
-    this._beforeAnimate = props.beforeAnimate || function() {};
-    this._afterAnimate = props.afterAnimate || function() {};
-  };
+    this._beforeAnimate = props.beforeAnimate || function () {};
+    this._afterAnimate = props.afterAnimate || function () {};
+    this._disableHistory = props.disableHistory;
+  }
 
   _handleClick = event => {
     this._beforeAnimate(event);
     event && event.preventDefault();
-    animateScroll(this._to, this._animate);
+    const id = animateScroll(this._to, this._animate);
+    this._disableHistory || updateHistory(id);
     this._afterAnimate(event);
-  };
+  }
 
-  componentWillReceiveProps(props) {
+  componentWillReceiveProps (props) {
     this._setup(props);
   }
 
-  render() {
-    const { to, animate, beforeAnimate, afterAnimate, ...props } = this.props; // eslint-disable-line no-unused-vars
+  render () {
+    const { to, animate, beforeAnimate, afterAnimate, disableHistory, ...props } = this.props; // eslint-disable-line no-unused-vars
 
     return !this.props.children
       ? null
@@ -56,6 +59,6 @@ export default class Scrollchor extends React.Component {
 
 // Default easing function
 // jQuery easing 'swing'
-function easeOutQuad(x, t, b, c, d) {
+function easeOutQuad (x, t, b, c, d) {
   return -c * (t /= d) * (t - 2) + b;
 }

src/utils.js

@@ -1,6 +1,6 @@
 import warning from 'fbjs/lib/warning';
 
-export function animateScroll(id, animate) {
+export function animateScroll (id, animate) {
   const element = id ? document.getElementById(id) : document.body;
   warning(element, `Cannot find element: #${id}`);
 
@@ -9,31 +9,35 @@ export function animateScroll(id, animate) {
   const to = getOffsetTop(element) + offset;
   const change = to - start;
 
-  function animateFn(elapsedTime = 0) {
+  function animateFn (elapsedTime = 0) {
     const increment = 20;
     const elapsed = elapsedTime + increment;
     const position = easing(null, elapsed, start, change, duration);
     setScrollTop(position);
     elapsed < duration &&
-      setTimeout(function() {
+      setTimeout(function () {
         animateFn(elapsed);
       }, increment);
   }
 
   animateFn();
+  return id;
+}
+
+export function updateHistory (id) {
   window.location.hash = id;
 }
 
-function getScrollTop() {
+function getScrollTop () {
   // like jQuery -> $('html, body').scrollTop
   return document.documentElement.scrollTop || document.body.scrollTop;
 }
 
-function setScrollTop(position) {
+function setScrollTop (position) {
   document.documentElement.scrollTop = document.body.scrollTop = position;
 }
 
-function getOffsetTop(element) {
+function getOffsetTop (element) {
   const { top } = element.getBoundingClientRect();
   return top + getScrollTop();
 }