{"id":15827296,"url":"https://github.com/awran5/react-simple-scroll-up","last_synced_at":"2025-10-03T22:15:57.001Z","repository":{"id":42056403,"uuid":"422229899","full_name":"awran5/react-simple-scroll-up","owner":"awran5","description":"A minimal lightweight react component for adding a nice scroll up (back to top) button with onScroll progress.","archived":false,"fork":false,"pushed_at":"2022-09-18T22:20:15.000Z","size":918,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-01T04:04:44.145Z","etag":null,"topics":["progress-bar","react","react-component","scroll-to-top","scrollup"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-simple-scroll-up","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/awran5.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-10-28T14:10:38.000Z","updated_at":"2024-10-11T13:44:54.000Z","dependencies_parsed_at":"2022-08-12T03:31:44.979Z","dependency_job_id":null,"html_url":"https://github.com/awran5/react-simple-scroll-up","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/awran5/react-simple-scroll-up","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/awran5%2Freact-simple-scroll-up","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/awran5%2Freact-simple-scroll-up/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/awran5%2Freact-simple-scroll-up/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/awran5%2Freact-simple-scroll-up/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/awran5","download_url":"https://codeload.github.com/awran5/react-simple-scroll-up/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/awran5%2Freact-simple-scroll-up/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278235057,"owners_count":25953269,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-03T02:00:06.070Z","response_time":53,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["progress-bar","react","react-component","scroll-to-top","scrollup"],"created_at":"2024-10-05T10:03:27.860Z","updated_at":"2025-10-03T22:15:56.949Z","avatar_url":"https://github.com/awran5.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Simple Scroll up (back to top)\n\n\u003e A minimal lightweight react component for adding a nice scroll up (back to top) with onScroll progress.\n\n[![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)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./screenshot.gif\" alt=\"screenshot\" width=\"100%\" /\u003e\n\u003c/p\u003e\n\n## Install\n\n#### npm\n\n```sh\nnpm i react-simple-scroll-up\n```\n\n#### Yarn\n\n```sh\nyarn add react-simple-scroll-up\n```\n\n---\n\n### Examples\n\n```jsx\nimport React from 'react'\nimport { ScrollToTop } from 'react-simple-scroll-up'\n\nconst MyComponent = () =\u003e {\n  return (\n    \u003cdiv className='App'\u003e\n      \u003cScrollToTop {/* Props */} /\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n\u003cbr /\u003e\n\n## Props\n\n| Prop               |        Type         | Options  | Description                                                                                      |         Default          |\n| ------------------ | :-----------------: | -------- | ------------------------------------------------------------------------------------------------ | :----------------------: |\n| `size`             |       number        | Optional | Set button width and height (in pixels)                                                          |           `50`           |\n| `offsetTop`        |       number        | Optional | Show button after number of pixels that document has scrolled vertically                         |          `100`           |\n| `bgColor`          |       string        | Optional | Button background color                                                                          |    `rgb(0 0 0 / 75%)`    |\n| `strokeWidth`      |       number        | Optional | Scroll progess bar width (in pixels)                                                             |           `4`            |\n| `strokeFillColor`  |       string        | Optional | Scroll progess bar fill color                                                                    |    `rgb(0 0 0 / 50%)`    |\n| `strokeEmptyColor` |       string        | Optional | Scroll progess bar empty color                                                                   | `rgb(200 200 200 / 85%)` |\n| `symbol`           | string or ReactNode | Optional | Use any HTML [Symbols]() by simply _copy/paste_ it OR any custom element, e.g. `FontAwesomeIcon` |           `🡩`            |\n| `symbolSize`       |       number        | Optional | Symbol font size (in pixels). Only applies when `symbol` is a string.                            |           `20`           |\n| `symbolColor`      |       string        | Optional | Symbol color.                                                                                    |          `#fff`          |\n| `onScrolling`      |      function       | Optional | Callback `function` that is triggered while scrolling with `value` passed                        |           `-`            |\n| `onClick`          |      function       | Optional | Callback `function` that is triggered when button is clicked                                     |           `-`            |\n| `onScrollEnd`      |      function       | Optional | Callback `function` that is triggered when scroll is ended                                       |           `-`            |\n| `className`        |       string        | Optional | CSS class name                                                                                   |    `to-top-progress`     |\n| `style`            | React.CSSProperties | Optional | CSS style                                                                                        |           `-`            |\n\n\u003cbr /\u003e\n\n[![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\u0026hidenavigation=1\u0026theme=dark)\n\n### License\n\nMIT © [awran5](https://github.com/awran5/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fawran5%2Freact-simple-scroll-up","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fawran5%2Freact-simple-scroll-up","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fawran5%2Freact-simple-scroll-up/lists"}