react-gototop-button v1.0.6

react-gototop-button

A highly customizable "Go to Top" button for React applications, designed to enhance user experience by providing a smooth and convenient way to scroll back to the top of the page.

Features

Easy Integration: Quickly add a "Go to Top" button to your React application with minimal setup.
Fully Customizable: Customize the button's background color, text color, size, position, padding, border radius, and more to match your application's design.
Smooth Scrolling: Smooth scroll back to the top of the page with a single click, enhancing the user experience.
Visibility Control: Specify the scroll position at which the button should appear, ensuring it only shows when needed.
Hover Effects: Add hover effects to the button for an interactive and engaging UI element.
Responsive Design: The button is designed to be fully responsive, ensuring it looks great on all devices.

Installation

You can install the package using npm or yarn:

npm install react-gototop-button

or

yarn add react-gototop-button

Usage

Here's an example of how to use the GoToTopButton component in your React application:

import React from 'react';
import GoToTopButton from 'react-gototop-button';

const App = () => (
    
<div  style={{  height: '200vh' }}>
	    
 <p>Scroll down to see the button...</p>
	    
	<GoToTopButton
		backgroundColor="purple"
		hoverColor="pink"
		color="white"
		padding="12px"
		position="top-right"
		size="40px"
		showAt={150}
		borderRadius="5px"
		>
			↑
	</GoToTopButton>
    
</div>
    
);

export default App;

Props

Credits

• Developed by Varad Patil
• Inspired by various "go to top" button implementations across the web.