React Smooth Scrolll

A lightweight and configurable smooth scrolling component for React and Next.js, powered by Lenis.

GitHub

Documentation

Installation

npm install react-smooth-scrolll

Or,

yarn add react-smooth-scrolll

Usage

• In React

Render the SmoothScroll in the root of your app.

import { SmoothScroll } from "react-smooth-scrolll";

// ...

const App = () => {
    return (
        <SmoothScroll>
            <div className="min-h-screen w-full py-20 px-10">
                <h1>Welcome to Smooth Scrolling!</h1>
            </div>
        </SmoothScroll>
    );
};

export default App;

• In NextJS Best Practice

Create a folder utils/ScrollSmooth.tsx or providers/SmoothScroll.tsx
Inside this file, paste the following code:

"use client";
import { SmoothScroll } from "react-smooth-scrolll";

const SmoothScrollProvider = ({ children }: { children: React.ReactNode }) => {
    return <SmoothScroll>{children}</SmoothScroll>;
};

export default SmoothScrollProvider;

Then, go to app/layout.tsx and wrap your content


import SmoothScrollProvider from "@/providers/SmoothScroll";

// ...

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <SmoothScrollProvider>
      <html lang="en">
        <body>
          <main className="w-full min-h-screen px-5 md:px-10 container border-x border-dashed border-zinc-400">
            {children}

          </main>
          <Footer />
        </body>

      </html>
    </SmoothScrollProvider>
  );
}

Customizing Scroll Behavior

You can override default settings using props:

import { SmoothScroll } from "react-smooth-scrolll";
            
// ...

<SmoothScroll scrollSpeed={2} smoothness={0.1} infinite={true} />{children}<SmoothScroll/>

Available Props

Prop	Type	Default	Description
scrollSpeed	number	1.5	Adjusts wheel scroll sensitivity
infinite	boolean	false	Enables infinite scroll looping
smoothness	number	0.07	Linear interpolation (smoothness) intensity (between 0 and 1)
options	object	{}	Additional Lenis options

Feature Request

Please provide a detailed description of the feature you'd like to see added to Smooth Scrolling. We'll review it and consider adding it if it aligns with our vision and best practices.