https://github.com/awran5/react-simple-scroll-up

A minimal lightweight react component for adding a nice scroll up (back to top) button with onScroll progress.
https://github.com/awran5/react-simple-scroll-up

progress-bar react react-component scroll-to-top scrollup

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/awran5/react-simple-scroll-up
• Owner: awran5
• License: mit
• Created: 2021-10-28T14:10:38.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-09-18T22:20:15.000Z (over 2 years ago)
• Last Synced: 2024-10-16T02:31:39.041Z (7 months ago)
• Topics: progress-bar, react, react-component, scroll-to-top, scrollup
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/react-simple-scroll-up
• Size: 896 KB
• Stars: 4
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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](https://img.shields.io/npm/v/react-simple-scroll-up.svg)](https://www.npmjs.com/package/react-simple-scroll-up) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)![npm bundle size](https://img.shields.io/bundlephobia/min/react-simple-scroll-up)![GitHub](https://img.shields.io/github/license/awran5/react-simple-scroll-up)



  



## Install

#### npm

```sh

npm i react-simple-scroll-up

```

#### Yarn

```sh

yarn add react-simple-scroll-up

```

---

### Examples

```jsx

import React from 'react'

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

const MyComponent = () => {

  return (

    


      

    

  )

}

```





## 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](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-simple-scroll-up-with-progress-onscroll-dxobe?fontsize=14&hidenavigation=1&theme=dark)

### License

MIT © [awran5](https://github.com/awran5/)