react-scroll-top-btn

React customize scroll to top button component

Install

npm install react-scroll-top-btn

If you are using yarn

yarn add react-scroll-top-btn

Import

import { Scroll } from 'react-scroll-top-btn'

Properties

| Properties | Require | Default | Description | Type | | ------------- | -------- | ----------------- | -------------------------------------------------------------------- | ------ | | displayHeight | optional | 300 | Display the button at the specific scroll height | number | | icon | optional | "fas fa-arrow-up" | Font-awesome icon class name | string | | iconSize | optional | 20 | The size of the font-awesome icon, px unit | number | | color | optional | "#000000" | The color of the icon, hex code or rgb style | string | | bgSize | optional | 40 | The width and height of the button box, px unit | number | | borderRadius | optional | "5px" | The border raidus of the button box, e.g. "50%" or "5px" | string | | position | optional | | "bottom-left" will display the button at the left bottom corner. | string | | xOffset | optional | 0 | Offset x position of the button. e.g. -200 will move left -200px | number | | yOffset | optional | 0 | Offset y position of the button. e.g. -100 will move button up 100px | number | | zIndex | optional | 0 | The z-index value of the button. | number |

Usage

import React from 'react'
import { Scroll } from 'react-scroll-top-btn'

export const App: React.FC = () => {
  return (
    <div>
      {/* Some dummy text ... */}
      <Scroll />
    </div>
  )
}

Uninstall

In your project directory, run

npm uninstall react-scroll-top-btn

If you are using yarn

yarn remove react-scroll-top-btn

ChangeLog

• 2020/07/10 version 1.0.1 publish

License

MIT © yang052513