A minimal lightweight react component for adding a nice scroll up (back to top) button with onScroll progress
React Back To Top
A minimal lightweight react component for adding a nice scroll up (back to top) button with onScroll progress.
Install
Not dependent on uiw.
npm install @uiw/react-back-to-top --save
Usage
import React from "react";
import BackToUp from '@uiw/react-back-to-top';
export default function App() {
return (
<div className="container">
<span style={{ color: 'red' }}>
Please check the button in the lower right corner of your web page.
</span>
<BackToUp>Top</BackToUp>
</div>
);
}
Support adding <BackToUp /> buttons to the partial scrollable area.
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 (
<Warpper ref={$dom}>
<h1>React simple scroll up with onScroll progress</h1>
<p>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.</p>
<h2>Scroll down ↓</h2>
<p>Declarative views make your code more predictable and easier to debug.</p>
<h2 style={{ height: 1200 }}>Scroll down ↓</h2>
<p>Build encapsulated components that manage their own state, then compose them to make complex UIs. </p>
<p>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.</p>
<BackToUp top={0} element={$dom.current} style={{ float: 'right' }}>Top</BackToUp>
</Warpper>
);
}
Custom button style.
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 (
<Warpper ref={$dom}>
<h1>React simple scroll up with onScroll progress</h1>
<p>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.</p>
<h2>Scroll down ↓</h2>
<p>Declarative views make your code more predictable and easier to debug.</p>
<h2>Scroll down ↓</h2>
<p>Build encapsulated components that manage their own state, then compose them to make complex UIs. </p>
<p>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.</p>
<BackToUp top={0} hideProgress element={$dom.current} style={{ float: 'right' }}>
<div style={{ border: '1px solid red', color: 'red', background: '#ffeb3b' }}>
Top
</div>
</BackToUp>
</Warpper>
);
}
Props
import React from 'react';
export interface BackToUpProps extends React.AllHTMLAttributes<HTMLDivElement> {
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
- Install
npm install
- To develop, run the self-reloading build:
npm run build # Compile packages ? @uiw/react-back-to-top
npm run watch # Real-time compilation ? @uiw/react-back-to-top
- Run Document Website Environment:
npm run start
- 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.
License
Licensed under the MIT License.