@sonardigital/back-to-top

A simple and customizable Back to Top button component for React applications.

Features

• 🚀 Easy to use: Plug and play component
• 🎨 Customizable: Full control over the button's appearance
• 🔧 Hooks: useBackToTop hook for custom implementations
• 📱 Responsive: Works on all devices

Installation

npm install @sonardigital/back-to-top

Quick Start

1. Wrap your application with BackToTopProvider:

import { BackToTopProvider, useBackToTop } from '@sonardigital/back-to-top';

function App() {
  const backToTopMethods = useBackToTop();

  return (
    <BackToTopProvider methods={backToTopMethods}>
      <YourApp />
    </BackToTopProvider>
  );
}

2. Use BackToTopContent to render the button:

import { BackToTopContent } from '@sonardigital/back-to-top';

function YourComponent() {
  return (
    <div>
      {/* Your content */}
      <BackToTopContent>
        <button className="my-back-to-top-btn">⬆️ Top</button>
      </BackToTopContent>
    </div>
  );
}

API Reference

BackToTopProvider

Provider component that shares the back-to-top state and methods.

| Prop | Type | Description | |------|------|-------------| | methods | ReturnType<typeof useBackToTop> | Return value of useBackToTop hook | | children | ReactNode | Child components |

BackToTopContent

Component that renders its children only when the scroll threshold is met.

| Prop | Type | Description | |------|------|-------------| | children | ReactNode | The button or content to display |

useBackToTop

Hook to manage the back-to-top logic.

const { isVisible, scrollToTop } = useBackToTop({ threshold: 300 });

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | threshold | number | window.innerHeight | Scroll distance in pixels before showing the button |

Returns

| Value | Type | Description | |-------|------|-------------| | isVisible | boolean | Whether the button should be visible | | scrollToTop | () => void | Function to scroll to the top of the page |

License

ISC