react-flyup-button/README.md

React component to scroll to the top of the page

# react-scroll-top-button

A simple and customizable React button that smoothly scrolls the page to the top when clicked.

---

## ✨ Features

- 🧩 Fully customizable via props
- 📱 Flexible positioning (left, right, center)
- 🖱️ Optional smooth scroll
- 🎨 Style with your own className (Tailwind or bootstrap) or inline styles
- 🪶 Lightweight and easy to integrate

## 📦 Installation

```bash
npm install react-flyup-button
# or
yarn add react-flyup-button
```

## 🚀 Usage

```js
import React from "react";
import ScrollToTopButton from "react-flyup-button";

function App() {
  return (
    <div>
      {/* Your page content */}
      <ScrollToTopButton />
    </div>
  );
}

export default App;
```

## ⚙️ Props (optional)

| Prop                | Type                                | Default            | Description                                            |
| ------------------- | ----------------------------------- | ------------------ | ------------------------------------------------------ |
| `className`         | `string`                            | `""`               | Custom class name for the button                       |
| `position`          | `"left"` \| `"right"` \| `"center"` | `"right"`          | Button alignment at the bottom                         |
| `bottom`            | `number`                            | `40`               | Distance from bottom (in pixels)                       |
| `left`              | `number`                            | `40` (if left)     | Distance from left (in pixels) if position is `"left"` |
| `width`             | `number`                            | `50`               | Button width in pixels                                 |
| `height`            | `number`                            | `50`               | Button height in pixels                                |
| `borderRadius`      | `number`                            | `25`               | Border radius (for rounded button)                     |
| `backgroundColor`   | `string`                            | `"#333"`           | Background color                                       |
| `borderColor`       | `string`                            | `"#000"`           | Border color                                           |
| `borderWidth`       | `number`                            | `1`                | Border width (in pixels)                               |
| `cursor`            | `string`                            | `"pointer"`        | Cursor style on hover                                  |
| `displayAt`         | `number`                            | `300`              | Scroll distance (px) after which button appears        |
| `animationDuration` | `number`                            | `300`              | Animation duration for scroll (ms)                     |
| `smoothScroll`      | `boolean`                           | `true`             | Enable smooth scroll                                   |
| `children`          | `React.ReactNode`                   | `▲` (default icon) | Custom button content (icon/text/etc.)                 |

## 🧪 Example with custom props

```js
function App() {
  return (
    <div>
      <ScrollToTopButton
        position="left"
        bottom={50}
        left={20}
        width={60}
        height={60}
        borderRadius={10}
        backgroundColor="#007BFF"
        borderColor="#0056b3"
        borderWidth={2}
        smoothScroll={true}
        displayAt={400}
      />
    </div>
  );
}
```