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