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 = () => (



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.