bump version 4.0.0

Author: bySabi

.gitignore

@@ -1,9 +1,7 @@
-.DS_Store
-
-node_modules
 lib
 
 # npm debug file
 npm-debug.log
 
+node_modules
 package-lock.json*

CHANGELOG.md

@@ -1,5 +1,15 @@
 ## master (unreleased)
 
+## 4.0.0
+
+- Add support to changeable props. All props become responsive
+- Add simulateClick API for animate scroll programmatically
+- On childrenless Scrollchor render to `null`, useful for programmatically scroll
+- Add track to `window.location.bash` needed by browser history, `back/forward` buttons
+- Source refactored
+- Update Example and Demo
+- Update Doc
+
 ## 3.0.0
 
 - Add React 15.5.x support

LICENSE

@@ -1,6 +1,6 @@
 ISC License
 
-Copyright (c) 2016 bySabi Files <[email protected]>
+Copyright (c) 2017 bySabi Files <[email protected]>
 
 Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
 

README.md

@@ -5,15 +5,17 @@
 [![bitHound Overall Score](https://www.bithound.io/github/bySabi/react-scrollchor/badges/score.svg)](https://www.bithound.io/github/bySabi/react-scrollchor)
 [![Donate](https://img.shields.io/badge/$-support-green.svg?style=flat-square)](https://paypal.me/bySabi/10)
 
-> A React component for scroll to `#hash` links with smooth animations. Scrollchor is a mix of `Scroll` and `Anchor`, a joke name for a useful component.
+> A React component for scroll to `#hash` links with smooth animations.
+> Scrollchor is a mix of `Scroll` and `Anchor`, a joke name for a useful component.
 
 See it in action:
 * demo [video](https://github.com/bySabi/react-scrollchor/blob/example/demo/scrollchor.webm?raw=true)
 * example [page](https://bySabi.github.com/react-scrollchor/) and [source code](https://github.com/bySabi/react-scrollchor/tree/example)
 
 
-## hash
-`hash` is the `id` of a HTML tag on current page
+`hash` is the `id` of a HTML tag on current page.
+
+
 
 ## Installation
 
@@ -24,7 +26,7 @@ npm install react-scrollchor --save
 ```
 
 ### Dependencies
-* User should provide its  own `React` package
+* User should provide their own `React` package
 
 
 #### `fbjs` package
@@ -33,10 +35,10 @@ npm install react-scrollchor --save
 
 ## Usage
 
-```javascript
+```js
 import Scrollchor from 'react-scrollchor';
 ```
-```javascript
+```js
 export default (props) => (
   <Page>
 
@@ -63,63 +65,92 @@ export default (props) => (
 </Page>
 ```
 
-# Prop types
-```javascript
+## Prop types
+```js
   propTypes: {
 
     /**
-     * id of tag scroll target node
-     * - starting `#` can be omited
-     * - this prop is required
+     * id attribute of target DOM node
+     * - `#` can be omited
      * - let it blank, `to = ''`, for scroll to page top
-     */
+   * - this prop it's required
+  */
     to: PropTypes.string.isRequired,
 
     /**
      * scroll smooth animation can be customize
-     * Accepted options:
+     * Accepted options, Ex: (default)
      *  { offset: 0, duration: 400, easing: easeOutQuad }
      */
     animate: PropTypes.object,
 
     /**
      * callback function triggered before scroll to #hash
+     * @param1 Received click event
      */
     beforeAnimate: PropTypes.func,
 
     /**
      * callback function triggered after scroll to #hash
+     * @param1 Received click event
      */
     afterAnimate: PropTypes.func
 }
 ```
+### Resposive `props`
+Update `props` will re-render `Scrollchor` element
 
-# Custom animation
+Ex: [updating  "to" props](https://github.com/bySabi/react-scrollchor/blob/example/src/App.js#L28)
 
-Animated behavior can be customize on each `#hash link` instance.
+## Custom animation
 
-```javascript
+Animated behavior can be customize:
+
+```js
 <Scrollchor to="#aboutus" animate={{offset: 20, duration: 600}} className="nav-link">Home</Scrollchor>
 ```
 
-## default animation config
-```javascript
+### default animation settings
+```js
 { offset: 0, duration: 400, easing: easeOutQuad }
 ```
 This setting is equivalent to default jQuery.animate `easing: swing`
 
-## more `Easing` functions
+### more `Easing` functions
 
 * [jQuery easings](http://api.jqueryui.com/easings/)
 * [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
+
+## `before` and `after` Animate callbacks
 Use this callbacks to trigger behaviours like, for example, update state, load async stuffs, etc.
-```javascript
+```js
 <Scrollchor to="#aboutus" afterAnimate={() => updateState(this)}>Home</Scrollchor>
 ```
 
+## Simulate click API
+Scrollchor include a dedicate API for init animate scroll programmatically that works like normal click events using `simulateClick()`
+
+Ex: [using simulateClick](https://github.com/bySabi/react-scrollchor/blob/example/src/App.js#L17)
+
+When used programmatically some use-case don't need `anchor tags`. On this cases use childrenless `Scrollchor`
+
+### Childrenless  `Scrollchor`
+This component will render `null` and the user it's reponsible of store the component [reference](https://facebook.github.io/react/docs/refs-and-the-dom.html)
+Ex: [(childrenless)](https://github.com/bySabi/react-scrollchor/blob/example/src/App.js#L24)
+```js
+<Scrollchor ref={ref => (this._back = ref)} to="_back" />
+```
+Ex: [(calling `simulateClick()` on childrenless `ref`)](https://github.com/bySabi/react-scrollchor/blob/example/src/App.js#L17)
+```js
+_afterAnimate = () => {
+  this.setState({ to: this._iterator.next().value });
+    setTimeout(() => this._back.simulateClick(), 1000);
+};
+```
+
+
 ## Example
 
 [react-scrollchor--example](https://github.com/bySabi/react-scrollchor/tree/example)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-scrollchor",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "A React component for scroll to #hash links with smooth animations",
   "files": [
     "lib"
@@ -16,7 +16,8 @@
     "testonly": "echo \"Error: no test specified\" && exit 1",
     "test": "npm run lint && npm run testonly",
     "prepare": "npm run build-npm",
-    "clean-install": "rm -rf node_modules && rm -rf package-lock.json && npm cache clean --force && npm install"
+    "clean-install": "npmclean && npm install",
+    "format": "prettier-eslint --write 'src/**/*.js*'"
   },
   "keywords": [
     "react",
@@ -41,7 +42,6 @@
     "babel-preset-react": "6.x.x",
     "babel-preset-stage-3": "6.x.x",
     "babel-eslint": "7.x.x",
-    "prettier-eslint-cli": "4.x.x",
     "semistandard": "*",
     "snazzy": "7.x.x",
     "fbjs": "*",

src/scrollchor.jsx

@@ -1,18 +1,12 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import warning from 'fbjs/lib/warning';
-import { getScrollTop, setScrollTop, getOffsetTop } from './utils';
+import React from "react";
+import PropTypes from "prop-types";
+import { animateScroll } from "./utils";
 
 export default class Scrollchor extends React.Component {
-  constructor (props) {
+  constructor(props) {
     super(props);
-    this._to = props.to && props.to.replace(/^#/, '') || '';
-    const {
-      offset = 0, duration = 400, easing = easeOutQuad
-    } = props.animate || {};
-    this._animate = { offset, duration, easing };
-    this._beforeAnimate = props.beforeAnimate || function () {};
-    this._afterAnimate = props.afterAnimate || function () {};
+    this._setup(props);
+    this.simulateClick = this._handleClick;
   }
 
   static propTypes = {
@@ -26,47 +20,42 @@ export default class Scrollchor extends React.Component {
     afterAnimate: PropTypes.func
   };
 
-  handleClick = (event) => {
+  _setup = props => {
+    this._to = (props.to && props.to.replace(/^#/, "")) || "";
+    const {
+      // default animate object
+      offset = 0,
+      duration = 400,
+      easing = easeOutQuad
+    } =
+      props.animate || {};
+    this._animate = { offset, duration, easing };
+    this._beforeAnimate = props.beforeAnimate || function() {};
+    this._afterAnimate = props.afterAnimate || function() {};
+  };
+
+  _handleClick = event => {
     this._beforeAnimate(event);
-    event.preventDefault();
+    event && event.preventDefault();
     animateScroll(this._to, this._animate);
     this._afterAnimate(event);
-  }
+  };
 
-  render () {
-    const { to, animate, beforeAnimate, afterAnimate, ...props } = this.props;  // eslint-disable-line no-unused-vars
-    return <a {...props} href={'#' + this._to} onClick={this.handleClick} />;
+  componentWillReceiveProps(props) {
+    this._setup(props);
   }
-}
 
-function animateScroll (id, animate) {
-  const element = id ? document.getElementById(id) : document.body;
-  warning(element, `Cannot find element: #${id}`);
-  scrollTo(element, animate);
-}
-
-function scrollTo (element, { offset, duration, easing }) {
-  const start = getScrollTop();
-  const to = getOffsetTop(element) + offset;
-  const change = to - start;
-  const increment = 20;
+  render() {
+    const { to, animate, beforeAnimate, afterAnimate, ...props } = this.props; // eslint-disable-line no-unused-vars
 
-  function animate (elapsedTime) {
-    const elapsed = elapsedTime + increment;
-    const position = easing(null, elapsed, start, change, duration);
-    setScrollTop(position);
-    if (elapsed < duration) {
-      setTimeout(function () {
-        animate(elapsed);
-      }, increment);
-    }
+    return !this.props.children
+      ? null
+      : <a {...props} href={"#" + this._to} onClick={this._handleClick} />;
   }
-
-  animate(0);
 }
 
 // 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,13 +1,36 @@
-export function getScrollTop () {
-  // jQuery => $('html, body').scrollTop
+import warning from "fbjs/lib/warning";
+
+export function animateScroll(id, animate) {
+  const element = id ? document.getElementById(id) : document.body;
+  warning(element, `Cannot find element: #${id}`);
+
+  const { offset, duration, easing } = animate;
+  const start = getScrollTop();
+  const to = getOffsetTop(element) + offset;
+  const change = to - start;
+
+  function animateFn(elapsedTime = 0) {
+    const increment = 20;
+    const elapsed = elapsedTime + increment;
+    const position = easing(null, elapsed, start, change, duration);
+    setScrollTop(position);
+    elapsed < duration && setTimeout(() => animateFn(elapsed), increment);
+  }
+
+  animateFn();
+  window.location.hash = id;
+}
+
+function getScrollTop() {
+  // like jQuery -> $('html, body').scrollTop
   return document.documentElement.scrollTop || document.body.scrollTop;
 }
 
-export function setScrollTop (position) {
+function setScrollTop(position) {
   document.documentElement.scrollTop = document.body.scrollTop = position;
 }
 
-export function getOffsetTop (element) {
+function getOffsetTop(element) {
   const { top } = element.getBoundingClientRect();
   return top + getScrollTop();
 }