/react-back-top

React component to back to top

Primary LanguageJavaScriptMIT LicenseMIT

react-back-top

React component to back to top.

1. Installation

npm install --save react-back-top

2. Demo & Examples

To build the examples locally, run:

npm install
npm start

3. Usage

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 iconto 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 Licensed.