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

| Prop | Type | Default | Description | |------------------|----------|---------------|-----------------------------------------------------------| | `backgroundColor`| `string` | `'blue'` | Background color of the button | | `color` | `string` | `'white'` | Text color of the button | | `padding` | `string` | `'10px'` | Padding inside the button | | `position` | `string` | `'bottom-right'`| Position of the button (`'bottom-right'`, `'bottom-left'`, `'top-right'`, `'top-left'`) | | `size` | `string` | `'50px'` | Width and height of the button | | `showAt` | `number` | `100` | Scroll position (in pixels) at which the button appears | | `borderRadius` | `string` | `'10px'` | Border radius of the button | | `children` | `node` | `'↑'` | Content of the button |

Credits

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