@shuheen/smooth-scroller

A lightweight smooth scrolling wrapper for React, using gsap and smooth-scrollbar for fluid animations and scroll effects. This package simplifies the integration of smooth scrolling and scroll-triggered animations in your React projects.

Features

• Smooth Scrolling: Powered by smooth-scrollbar, delivering silky-smooth scrolling experience.
• Scroll Animations: Seamless integration with gsap for scroll-triggered animations.
• Customizable: Easily tweak scroll behavior and customize to your project's needs.
• React Support: Works out-of-the-box with React functional components.

Installation

To install the package, use npm or yarn:

npm install @shuheen/smooth-scroller gsap smooth-scrollbar

or

yarn add @shuheen/smooth-scroller gsap smooth-scrollbar

Usage

First, wrap your content with the SmoothScroller component provided by the package:

import React from 'react';
import SmoothScroller from '@shuheen/smooth-scroller';

const App: React.FC = () => {
  return (
    <SmoothScroller>
      <div className="scroller">
        <h1>Welcome to the Smooth Scroller!</h1>
        <p>Your content goes here...</p>
      </div>
    </SmoothScroller>
  );
};

export default App;

CSS

To ensure proper scrolling behavior, add the following CSS to your main stylesheet after installation:

.scroller {
    height: 100vh;
    overflow-x: hidden;
}

Props

• children: The content or elements that need smooth scrolling functionality.
• options?: A partial object of type ScrollbarOptions to customize scroll behavior. This can include properties like damping, speed, and renderByPixels.
• onScroll?: A callback function triggered on every scroll event, receiving the scrollBarInstance and current status (position, velocity, etc.).

Example

import React from 'react';
import SmoothScroller from '@shuheen/smooth-scroller';

const Example: React.FC = () => {
  return (
    <SmoothScroller>
      <div className="scroller">
        <h1>Smooth Scroll Example</h1>
        <p>
          This is an example of how smooth scrolling works with GSAP animations.
        </p>
        {/* Add more content */}
      </div>
    </SmoothScroller>
  );
};

export default Example;

Options

For additional options and customization, refer to the smooth-scrollbar documentation.

TypeScript Support

This package is fully typed for TypeScript projects. Here’s how you would use it in a TypeScript project:

import React from 'react';
import SmoothScroller from '@shuheen/smooth-scroller';

const App: React.FC = () => (
  <SmoothScroller>
    <div className="scroller">
      <h1>Smooth Scroll with TypeScript</h1>
    </div>
  </SmoothScroller>
);

export default App;

Contributing

If you'd like to contribute to this package, feel free to fork the repository, make your changes, and submit a pull request. We welcome contributions that improve functionality, fix bugs, or enhance performance.

1. Fork the repository
2. Create a feature branch (git checkout -b feature/your-feature)
3. Commit your changes (git commit -m 'Add some feature')
4. Push to the branch (git push origin feature/your-feature)
5. Open a pull request

License

This project is licensed under the MIT License. See the LICENSE file for more details.