# @uiw/react-back-to-top
> A minimal lightweight react component for adding a nice scroll up (back to top) button with onScroll progress.
Latest version **1.2.4** (published 2026-05-30) · MIT license · 0 weekly downloads
## Install
```sh
npm install @uiw/react-back-to-top
pnpm add @uiw/react-back-to-top
yarn add @uiw/react-back-to-top
bun add @uiw/react-back-to-top
```
## Health
**Score 60/100 (C)** — status: active.
Positive: has types; esm support; no vulnerabilities; has provenance.
Warnings: low downloads.
## Facts
| | |
|---|---|
| Version | 1.2.4 |
| Published | 2026-05-30 |
| First published | 2022-08-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 48.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 6 |
| Author | Kenny Wong |
| Maintainers | wcjiang, uiwjs |
| Keywords | react-back-to-top, react.js, react, back-to-top, uiw, uiw-react, react-component, component, components, ui, css, uikit, framework |
## Links
- npm: https://www.npmjs.com/package/@uiw/react-back-to-top
- Repository: https://github.com/uiwjs/react-back-to-top
- Homepage: https://uiwjs.github.io/react-back-to-top
- Issues: https://github.com/uiwjs/react-back-to-top/issues
- npm.io page: https://npm.io/package/@uiw/react-back-to-top
## Alternatives
- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads
## Recent versions
- 1.2.4 (latest) — 2026-05-30
- 1.2.3 — 2023-06-06
- 1.2.2 — 2023-05-07
- 1.2.1 — 2022-09-08
- 1.2.0 — 2022-08-28
- 1.1.2 — 2022-08-28
- 1.1.1 — 2022-08-27
- 1.0.0 — 2022-08-27
## README
React Back To Top
===
[](https://jaywcjlove.github.io/#/sponsor)
[](https://x.com/jaywcjlove)
[](https://uiwjs.github.io/react-back-to-top/coverage/lcov-report/)
[](https://www.npmjs.com/package/@uiw/react-back-to-top)
[](https://www.npmjs.com/package/@uiw/react-back-to-top)
A minimal lightweight react component for adding a nice scroll up (back to top) button with onScroll progress.
[](https://uiwjs.github.io/react-back-to-top/)
## Install
Not dependent on uiw.
```bash
npm install @uiw/react-back-to-top --save
```
## Usage
```jsx mdx:preview
import React from "react";
import BackToUp from '@uiw/react-back-to-top';
export default function App() {
return (
Please check the button in the lower right corner of your web page.
Top
);
}
```
Support adding `` buttons to the partial scrollable area.
```jsx mdx:preview
import React, { useRef, useEffect, useState } from "react";
import BackToUp from '@uiw/react-back-to-top';
import styled from 'styled-components';
const Warpper = styled.div`
overflow: auto;
white-space: normal;
width: 300px;
height: 300px;
&::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
background: #00000038;
}
&::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: #595959;
}
p {
display: inline;
background: rgba(0, 0, 0, 0.12);
color: transparent;
}
`;
export default function App() {
const $dom = useRef(null);
const [element, setElement]= useState();
useEffect(() => setElement($dom.current), [])
return (
React simple scroll up with onScroll progress
React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
Scroll down ↓
Declarative views make your code more predictable and easier to debug.
Scroll down ↓
Build encapsulated components that manage their own state, then compose them to make complex UIs.
Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
Top
);
}
```
Custom button style.
```jsx mdx:preview
import React, { useRef, useEffect, useState } from "react";
import BackToUp from '@uiw/react-back-to-top';
import styled from 'styled-components';
const Warpper = styled.div`
overflow: auto;
white-space: normal;
width: 300px;
height: 300px;
&::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
background: #00000038;
}
&::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: #595959;
}
p {
display: inline;
background: rgba(0, 0, 0, 0.12);
color: transparent;
}
`;
export default function App() {
const $dom = useRef(null);
const [element, setElement]= useState();
useEffect(() => setElement($dom.current), [])
return (
React simple scroll up with onScroll progress
React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
Scroll down ↓
Declarative views make your code more predictable and easier to debug.
Scroll down ↓
Build encapsulated components that manage their own state, then compose them to make complex UIs.
Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
Top
);
}
```
## Props
```ts
import React from 'react';
export interface BackToUpProps extends React.AllHTMLAttributes {
prefixCls?: string;
/** Scroll bar area @default document.documentElement **/
element?: HTMLElement;
/** Whether to use smooth scrolling* @default true */
smooth?: boolean;
/** Classname to add/override styling (note, !important for overrides might be needed) */
className?: string;
/** Object to add/override styling */
style?: React.CSSProperties;
/** Height after page scroll to be visible @default 120 **/
top?: number;
/** The Button width & height @default 35 */
size?: number;
/** the width of the progress bar */
strokeWidth?: number;
/** hide progress icon */
hideProgress?: boolean;
}
export default function BackToUp(props?: BackToUpProps): JSX.Element;
```
## Development
1. Install
```bash
npm install
```
2. To develop, run the self-reloading build:
```bash
npm run build # Compile packages 📦 @uiw/react-back-to-top
npm run watch # Real-time compilation 📦 @uiw/react-back-to-top
```
3. Run Document Website Environment:
```bash
npm run start
```
4. To contribute, please fork repos, add your patch and tests for it (in the `test/` folder) and submit a pull request.
```
npm run test
```
## Contributors
As always, thanks to our amazing contributors!
Made with [github-action](https://github.com/jaywcjlove/github-action-contributors).
## License
Licensed under the MIT License.
---
_Source: https://npm.io/package/@uiw/react-back-to-top · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
