Skip to content

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

License

Notifications You must be signed in to change notification settings

awran5/react-simple-scroll-up

Repository files navigation

React Simple Scroll up (back to top)

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

NPM JavaScript Style Guidenpm bundle sizeGitHub

screenshot

Install

npm

npm i react-simple-scroll-up

Yarn

yarn add react-simple-scroll-up

Examples

import React from 'react'
import { ScrollToTop } from 'react-simple-scroll-up'

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 number 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 or ReactNode Optional Use any HTML Symbols by simply copy/paste it OR any custom element, e.g. FontAwesomeIcon 🡩
symbolSize number Optional Symbol font size (in pixels). Only applies when symbol is a string. 20
symbolColor string Optional Symbol color. #fff
onScrolling function Optional Callback function that is triggered while scrolling with value passed -
onClick function Optional Callback function that is triggered when button is clicked -
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 -

Edit react-simple-scroll-up

License

MIT © awran5