react-top-bottom-scroll
Version:
**Add a user-friendly scroll-to-top/bottom button to your React applications.**
70 lines (49 loc) • 2.56 kB
Markdown
# 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](https://react-top-bottom-scroll.netlify.app/) ###
## Installation
```bash
npm install react-top-bottom-scroll
```
or
```
yarn add react-top-bottom-scroll
```
## Usage
```javascript
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