feat: add Lenis custom hook for smooth scrolling #400
Conversation
|
@TenzDelek is attempting to deploy a commit to the Sanchit Bajaj's projects Team on Vercel. A member of the Team first needs to authorize it. |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Great job, @TenzDelek! 🎉 Thank you for submitting your pull request. Your contribution is valuable and we appreciate your efforts to improve our project. Keep being the part of the community!
'We will promptly review your changes and offer feedback. Keep up the excellent work!
Kindly remember to check our Contributing Guidelines'
WalkthroughThe changes introduce smooth scrolling functionality using the Lenis library by wrapping the main content in a Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant RootLayout
participant LenisWrapper
participant useLenis
participant Lenis
User ->> RootLayout: Load Page
RootLayout ->> LenisWrapper: Render Content
LenisWrapper ->> useLenis: Initialize Lenis
useLenis ->> Lenis: Configure and Start
Lenis ->> useLenis: Smooth Scroll Management
useLenis ->> LenisWrapper: Apply Smooth Scroll
LenisWrapper ->> RootLayout: Wrapped Content
RootLayout ->> User: Display Page with Smooth Scroll
Assessment against linked issues
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Outside diff range, codebase verification and nitpick comments (1)
src/helper/useLenis.ts (1)
9-9: Add type annotations fortimeparameter.TypeScript best practices suggest adding type annotations for parameters.
- function raf(time:any) { + function raf(time: number) {
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (2)
package.jsonis excluded by!**/*.jsonyarn.lockis excluded by!**/yarn.lock,!**/*.lock,!**/*.lock
Files selected for processing (3)
- src/app/layout.tsx (3 hunks)
- src/helper/leniswrapper.tsx (1 hunks)
- src/helper/useLenis.ts (1 hunks)
Additional comments not posted (2)
src/helper/leniswrapper.tsx (1)
12-16: LGTM!The
LenisWrappercomponent correctly uses theuseLenishook and renders its children.src/app/layout.tsx (1)
Line range hint
53-95:
LGTM!The
RootLayoutfunction correctly uses theLenisWrappercomponent to enable smooth scrolling.
| const useLenis = () => { | ||
| useEffect(() => { | ||
| const lenis = new Lenis(); | ||
|
|
||
| function raf(time:any) { | ||
| lenis.raf(time); | ||
| requestAnimationFrame(raf); | ||
| } | ||
|
|
||
| requestAnimationFrame(raf); | ||
| }, []); |
There was a problem hiding this comment.
Ensure proper cleanup in useEffect.
The useEffect hook should clean up the requestAnimationFrame loop to avoid potential memory leaks.
useEffect(() => {
const lenis = new Lenis();
function raf(time: any) {
lenis.raf(time);
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
+ return () => {
+ lenis.destroy();
+ };
}, []);Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const useLenis = () => { | |
| useEffect(() => { | |
| const lenis = new Lenis(); | |
| function raf(time:any) { | |
| lenis.raf(time); | |
| requestAnimationFrame(raf); | |
| } | |
| requestAnimationFrame(raf); | |
| }, []); | |
| const useLenis = () => { | |
| useEffect(() => { | |
| const lenis = new Lenis(); | |
| function raf(time: any) { | |
| lenis.raf(time); | |
| requestAnimationFrame(raf); | |
| } | |
| requestAnimationFrame(raf); | |
| return () => { | |
| lenis.destroy(); | |
| }; | |
| }, []); |
| @@ -0,0 +1,18 @@ | |||
| 'use client' | |||
| import { useEffect } from 'react'; | |||
There was a problem hiding this comment.
I think it will be better if you combine both useLenis hook and Lenis wrapper into a single file.
Sanchitbajaj02
added
🏆 good first issue
|
@TenzDelek Please do the changes requested to get this PR merged |
Related Issue
fixes: #397
Description
added smooth scroll
Summary by CodeRabbit
LenisWrappercomponent to enhance animation management.useLeniscustom hook for improved animation control.LenisWrapperto leverage new animation capabilities.