https://github.com/psparwez/react-smooth-scrolll
A lightweight React component for smooth scrolling using Lenis, compatible with React & Next.js. ✔️
https://github.com/psparwez/react-smooth-scrolll
javascript npm react react-smooth-scroll react-smooth-scrolll smooth-scrolling typescript
Last synced: 8 days ago
JSON representation
A lightweight React component for smooth scrolling using Lenis, compatible with React & Next.js. ✔️
- Host: GitHub
- URL: https://github.com/psparwez/react-smooth-scrolll
- Owner: psparwez
- Created: 2025-02-24T13:37:46.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-12-18T20:33:01.000Z (4 months ago)
- Last Synced: 2025-12-21T21:58:32.037Z (4 months ago)
- Topics: javascript, npm, react, react-smooth-scroll, react-smooth-scrolll, smooth-scrolling, typescript
- Language: TypeScript
- Homepage: https://react-smooth-scrolll.vercel.app
- Size: 170 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-smooth-scrolll
A lightweight and configurable smooth scrolling component for React and Next.js, powered by [Lenis](https://github.com/studio-freight/lenis).
## Features
- Smooth scrolling with customizable speed and easing
- Supports React and Next.js
- Configurable props for scrolll behavior
- Optimized for performance
## Installation
```sh
npm install react-smooth-scrolll
```
or
```sh
yarn add react-smooth-scrolll
```
## Usage
### **Basic Example**
In React
```tsx
import { SmoothScroll } from "react-smooth-scrolll";
const App = () => {
return (
Welcome to Smooth Scrolling!
);
};
export default App;
```
Best Practice in Next.js
1. Create a folder `utils/ScrollSmooth.tsx` or `providers/SmoothScroll.tsx`.
2. Inside this file, paste the following code:
```tsx
"use client";
import { SmoothScroll } from "react-smooth-scrolll";
const SmoothScrollProvider = ({ children }: { children: React.ReactNode }) => {
return {children};
};
export default SmoothScrollProvider;
```
3. Then, go to `app/page.tsx` and wrap your content:
```tsx
import SmoothScrollProvider from "@/providers/SmoothScroll";
export default function Home() {
return (
Home Page!
);
}
```
### Customizing Scroll Behavior
You can override default settings using props:
```tsx
```
### 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 |
## API
### `useSmoothScroll()`
A custom hook to access the `Lenis` instance for advanced controls.
```tsx
import { useSmoothScroll } from "react-smooth-scrolll";
const Component = () => {
const lenis = useSmoothScroll();
return (
lenis?.scrollTo(500)}>
Scroll to 500px
);
};
```
## Testing
This package includes unit tests using Vitest and React Testing Library. Run tests with:
```sh
npm run test
```
## License
MIT