React to Top (back to top)

A minimal lightweight react component for adding a nice scroll up (back to top) with onScroll progress.

Install

npm

npm i react-to-top

Yarn

yarn add react-to-top

Examples

import React from 'react'
import { ScrollToTop } from 'react-to-top'

const MyComponent = () => {
  return (
    <div className='App'>
      <ScrollToTop {/* Props */} />
    </div>
  )
}

Props

| Prop | Type | Options | Description | Default | | ------------------ | :-----------------: | -------- | ------------------------------------------------------------------------------------ | :----------------------: | | size | number | Optional | Set button width and height (in pixels) | 50 | | offsetTop | string | Optional | Show button after number of pixels that document has scrolled vertically | 100 | | bgColor | string | Optional | Button background color | rgb(0 0 0 / 75%) | | strokeWidth | number | Optional | Scroll progess bar width (in pixels) | 4 | | strokeFillColor | string | Optional | Scroll progess bar fill color | rgb(0 0 0 / 50%) | | strokeEmptyColor | string | Optional | Scroll progess bar empty color | rgb(200 200 200 / 85%) | | symbol | string | Optional | Use any HTML Symbols by simply copy/paste it | 🡩 | | symbolSize | number | Optional | Symbol font size (in pixels) | 20 | | symbolColor | string | Optional | Symbol color | #fff | | onScrolling | function | Optional | Callback function that is triggered while scrolling with value passed | - | | onScrollEnd | function | Optional | Callback function that is triggered when scroll is ended | - | | className | string | Optional | CSS class name | to-top-progress | | style | React.CSSProperties | Optional | CSS style | - |

License

MIT © Joaquin A. Moquette