0.0.29 • Published 3 months ago
react-top-bottom-scroll v0.0.29
React Top Bottom Scroll
Add a user-friendly scroll-to-top/bottom button to your React applications.
Features
- Smooth scrolling: Seamlessly animates scrolling to the top or bottom of the page.
- Customizable: Customize colors, icons, and titles to match your project's style.
- Adaptive: Intelligently shows or hides the button based on scroll position.
- Flexible: Scroll to specific elements using refs.
- Easy to use: Integrates seamlessly into any React project.
Demo
See a working demo
Installation
npm install react-top-bottom-scroll
or
yarn add react-top-bottom-scroll
Usage
import ScrollUpDown from 'react-top-bottom-scroll';
function MyComponent() {
return (
<div>
{/* ... your content ... */}
<ScrollUpDown />
</div>
);
}
Props
Prop | Type | Default | Description |
---|---|---|---|
bottomRef | React.Ref | null | Ref of an element to scroll to the bottom of. |
topRef | React.Ref | null | Ref of an element to scroll to the top of. |
id | string | "" | Optional ID of a specific element to scroll to. |
smooth | boolean | true | Whether to scroll smoothly. Set to false for immediate scrolling. |
upIconColor | string | "white" | Color of the up arrow icon. |
downIconColor | string | "white" | Color of the down arrow icon. |
upTitleMessage | string | "Scroll to top" | Title attribute for the up button. |
downTitleMessage | string | "Scroll to bottom" | Title attribute for the down button. |
style | object | {} | Additional styles to apply to the button. |
renderIcon | (direction: "up" | "down") => JSX.Element | null | Custom function to render icons. |
Warning
The default z-index is 10001. If other elements on your page have higher z-indices, the button might be hidden. If this occurs, you can set a custom z-index using the style
prop.
Contributing
Contributions are welcome! Please create a pull request with your changes.
License
MIT
0.0.29
3 months ago
0.0.27
4 months ago
0.0.28
4 months ago
0.0.23
4 months ago
0.0.24
4 months ago
0.0.25
4 months ago
0.0.26
4 months ago
0.0.21
4 months ago
0.0.22
4 months ago
0.0.20
4 months ago
0.0.13
4 months ago
0.0.14
4 months ago
0.0.15
4 months ago
0.0.16
4 months ago
0.0.17
4 months ago
0.0.18
4 months ago
0.0.19
4 months ago
0.0.12
4 months ago
0.0.11
4 months ago
0.0.10
4 months ago
0.0.9
4 months ago
0.0.8
4 months ago
0.0.7
4 months ago
0.0.6
4 months ago
0.0.4
4 months ago
0.0.3
4 months ago
0.0.2
4 months ago
0.0.1
4 months ago