兼容多种图标，添加readme

README.md

@@ -1,2 +1,44 @@
 # react-back-top
-React component to back to top
+React component to back to top.  
+![](example/back_top.gif)
+## 1. Installation
+> npm install --save react-back-top
+
+## 2. Demo & Examples
+To build the examples locally, run:
+> npm install  
+npm start
+
+## 3. Usage
+```js
+import React from 'react';
+import BackToTop from 'react-back-top';
+const Demo = (props) => {
+  const config = {
+      text: "回到顶部",
+        topDistance: 10,
+        timing=“easeIn”
+    }
+  return <BackToTop ...config/>
+}
+export default Demo;
+```
+## 4. Properties
+
+prop | type | default | notes  
+------- | ------- | ------- | -------
+shape | string | default | `default` or `round`, default is rectangle
+radius | number | 24 | Only work for `round` shape
+text | string |  | Content of button
+fontSize | string | 16px |
+position | object | {  bottom: '10%', right: '5%'} | `top` `bottom` `left` `right` are avalible, determine the position of button
+icon | string | | It is a class name of icon,font icon such as `font awesome` and `icomoon` are supported. For `Material Design Icons`, icon should be `material-icons search`, search is the name of icon, but fontSize is not worked for `Material Design Icons`, you need to set `icon`to be `material-icons md-18 search`
+color | string | white | Color of text or icon
+background | string | #ff5252 | Backgound of button 
+hover | object | {background: '#eb0000' } | Effect when hover
+topDistance | number | 200 | Scroll y position where button is visible, set 0 the button will always visible
+timing | string | linear | Timing function scroll to top, `linear`, `easeIn`, `easeOut`, `easeInOut` are available
+speed | number | 100 | Speed to scroll
+
+## License
+Copyright (c) 2017 ZiQiangWang [MIT](https://github.com/ZiQiangWang/react-back-top/blob/master/LICENSE) Licensed.

lib/BackToTop.js

@@ -48,13 +48,15 @@ var BackToTop = function (_Component) {
       if (opacity === 0 && show) {
         _this.setState(_extends({}, _this.state, {
           style: _extends({}, _this.state.style, {
-            opacity: 1
+            opacity: 1,
+            zIndex: 1000
           })
         }));
       } else if (opacity === 1 && !show) {
         _this.setState(_extends({}, _this.state, {
           style: _extends({}, _this.state.style, {
-            opacity: 0
+            opacity: 0,
+            zIndex: -1
           })
         }));
       }
@@ -77,11 +79,11 @@ var BackToTop = function (_Component) {
         zIndex: 1000,
         paddingBottom: '50%',
         padding: '6px 12px',
-
         fontSize: props.fontSize,
         textAlign: 'center',
         whiteSpace: 'nowrap',
-
+        width: props.text === '' && props.radius * 2 + 'px',
+        height: props.text === '' && props.radius * 2 + 'px',
         opacity: 0,
         color: props.color,
         background: props.background,
@@ -99,22 +101,40 @@ var BackToTop = function (_Component) {
     return _this;
   }
 
-  /* eslint-disable react/no-did-mount-set-state */
-
-
   _createClass(BackToTop, [{
+    key: 'componentWillMount',
+    value: function componentWillMount() {
+      var _props = this.props,
+          icon = _props.icon,
+          text = _props.text;
+
+      var iconStyle = {
+        paddingRight: text !== '' ? '10px' : '0'
+      };
+      if (icon === '') {
+        this.ico = '';
+      } else if (/^material-icons[\s]/.test(icon)) {
+        var classes = icon.split(' ');
+        var item = classes.pop();
+        this.ico = _react2.default.createElement(
+          'span',
+          { className: classes.join(' '), style: iconStyle },
+          item
+        );
+      } else {
+        this.ico = _react2.default.createElement('span', { className: icon, style: iconStyle });
+      }
+    }
+    /* eslint-disable react/no-did-mount-set-state */
+
+  }, {
     key: 'componentDidMount',
     value: function componentDidMount() {
-      if (this.props.shape === 'round') {
-        var width = this.btn.offsetWidth;
-        this.setState(_extends({}, this.state, {
-          style: _extends({}, this.state.style, {
-            height: width + 'px'
-          })
-        }));
-      }
       window.addEventListener('scroll', this.handleScroll);
     }
+  }, {
+    key: 'componentWillUpdate',
+    value: function componentWillUpdate() {}
   }, {
     key: 'componentWillUnmount',
     value: function componentWillUnmount() {
@@ -125,10 +145,9 @@ var BackToTop = function (_Component) {
     value: function render() {
       var _this2 = this;
 
-      var _props = this.props,
-          icon = _props.icon,
-          text = _props.text,
-          hover = _props.hover;
+      var _props2 = this.props,
+          text = _props2.text,
+          hover = _props2.hover;
 
 
       return _react2.default.createElement(
@@ -146,7 +165,7 @@ var BackToTop = function (_Component) {
             return _this2.handleHover(false);
           }
         },
-        icon !== '' ? _react2.default.createElement('span', { className: icon, style: { paddingRight: text !== '' ? '10px' : '0' } }) : '',
+        this.ico,
         text
       );
     }
@@ -159,7 +178,8 @@ BackToTop.defaultProps = {
   shape: 'default',
   text: '',
   icon: '',
-  fontSize: '16px',
+  radius: 24,
+  fontSize: '18px',
   position: {
     bottom: '10%',
     right: '5%'
@@ -171,11 +191,12 @@ BackToTop.defaultProps = {
   },
   topDistance: 200,
   timing: 'linear',
-  speed: 15
+  speed: 100
 };
 
 BackToTop.propTypes = {
   shape: _propTypes2.default.oneOf(['default', 'round']),
+  radius: _propTypes2.default.number,
   text: _propTypes2.default.string,
   fontSize: _propTypes2.default.string,
   position: _propTypes2.default.shape({

lib/scroll.js

@@ -84,11 +84,20 @@ var scrollTo = exports.scrollTo = function scrollTo(pos) {
   }
 
   var start = 0;
+  var stop = void 0;
   var _run = function _run() {
     start++;
     var top = Tween[ease](start, scrollY, targetY - scrollY, during);
     window.scrollTo(0, top);
-    if (start < during) requestAnimationFrame(_run);
+    if (start < during) {
+      stop = requestAnimationFrame(_run);
+    }
   };
   _run();
+
+  return stop;
+};
+
+var stopScroll = exports.stopScroll = function stopScroll(stop) {
+  cancelAnimationFrame(stop);
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-back-top",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "React component for back to top",
   "main": "./lib/BackToTop.js",
   "scripts": {

src/BackToTop.jsx

@@ -21,11 +21,11 @@ class BackToTop extends Component {
         zIndex: 1000,
         paddingBottom: '50%',
         padding: '6px 12px',
-
         fontSize: props.fontSize,
         textAlign: 'center',
         whiteSpace: 'nowrap',
-
+        width: props.text === '' && `${props.radius * 2}px`,
+        height: props.text === '' && `${props.radius * 2}px`,
         opacity: 0,
         color: props.color,
         background: props.background,
@@ -42,21 +42,30 @@ class BackToTop extends Component {
     this.handleScroll = this.handleScroll.bind(this);
   }
 
+  componentWillMount() {
+    const { icon, text } = this.props;
+    const iconStyle = {
+      paddingRight: (text !== '' ? '10px' : '0'),
+    };
+    if (icon === '') {
+      this.ico = '';
+    } else if (/^material-icons[\s]/.test(icon)) {
+      const classes = icon.split(' ');
+      const item = classes.pop();
+      this.ico = <span className={classes.join(' ')} style={iconStyle}>{item}</span>;
+    } else {
+      this.ico = <span className={icon} style={iconStyle}></span>;
+    }
+  }
   /* eslint-disable react/no-did-mount-set-state */
   componentDidMount() {
-    if (this.props.shape === 'round') {
-      const width = this.btn.offsetWidth;
-      this.setState({
-        ...this.state,
-        style: {
-          ...this.state.style,
-          height: `${width}px`,
-        },
-      });
-    }
     window.addEventListener('scroll', this.handleScroll);
   }
 
+  componentWillUpdate() {
+
+  }
+
   componentWillUnmount() {
     window.removeEventListener('scroll', this.handleScroll);
   }
@@ -72,6 +81,7 @@ class BackToTop extends Component {
         style: {
           ...this.state.style,
           opacity: 1,
+          zIndex: 1000,
         },
       });
     } else if (opacity === 1 && !show) {
@@ -80,6 +90,7 @@ class BackToTop extends Component {
         style: {
           ...this.state.style,
           opacity: 0,
+          zIndex: -1,
         },
       });
     }
@@ -98,7 +109,7 @@ class BackToTop extends Component {
   }
 
   render() {
-    const { icon, text, hover } = this.props;
+    const { text, hover } = this.props;
 
     return (
       <button
@@ -108,7 +119,7 @@ class BackToTop extends Component {
         onMouseOver={() => this.handleHover(true)}
         onMouseOut={() => this.handleHover(false)}
       >
-        { icon !== '' ? <span className={icon} style={{ paddingRight: (text !== '' ? '10px' : '0') }}></span> : '' }
+        { this.ico }
         { text }
       </button>
     );
@@ -119,7 +130,8 @@ BackToTop.defaultProps = {
   shape: 'default',
   text: '',
   icon: '',
-  fontSize: '16px',
+  radius: 24,
+  fontSize: '18px',
   position: {
     bottom: '10%',
     right: '5%',
@@ -131,11 +143,12 @@ BackToTop.defaultProps = {
   },
   topDistance: 200,
   timing: 'linear',
-  speed: 15,
+  speed: 100,
 };
 
 BackToTop.propTypes = {
   shape: PropTypes.oneOf(['default', 'round']),
+  radius: PropTypes.number,
   text: PropTypes.string,
   fontSize: PropTypes.string,
   position: PropTypes.shape({

src/Demo.jsx

@@ -966,7 +966,10 @@ const Demo = props => (
 　　ALBUS DUMBLEDORE
 
     </p>
-    <BackToTop text="回到顶部" icon="fa fa-address-book-o" topDistance={10} speed={100} timing="easeIn" />
+    <BackToTop shape="round" icon="material-icons md-18 arrow_upward" position={{ bottom: '40%', right: '5%' }} />
+    <BackToTop shape="round" icon="fa fa-arrow-up" position={{ bottom: '30%', right: '5%' }} />
+    <BackToTop text="回到顶部" position={{ bottom: '20%', right: '5%' }} />
+    <BackToTop text="回到顶部" icon="fa fa-arrow-up" position={{ bottom: '10%', right: '5%' }} />
   </div>
 );
 

src/index.html

@@ -7,6 +7,7 @@
 <meta name="description" content="">
 <meta name="keywords" content="">
 <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
     <div id="root"></div>

src/scroll.js

@@ -75,11 +75,20 @@ export const scrollTo = (pos, during = 60, ease = 'linear') => {
   }
 
   let start = 0;
+  let stop;
   const _run = function () {
     start++;
     const top = Tween[ease](start, scrollY, targetY - scrollY, during);
     window.scrollTo(0, top);
-    if (start < during) requestAnimationFrame(_run);
+    if (start < during) {
+      stop = requestAnimationFrame(_run);
+    }
   };
   _run();
+
+  return stop;
 };
+
+export const stopScroll = (stop) => {
+  cancelAnimationFrame(stop);
+}