feat: add Lenis custom hook for smooth scrolling (#400)

Co-authored-by: Sanchit Bajaj <[email protected]>
Sanchitbajaj02 · Jul 29, 2024 · caa525b · caa525b
1 parent 8bad028
commit caa525b
Show file tree

Hide file tree

Showing 5 changed files with 341 additions and 210 deletions.
diff --git a/package.json b/package.json
@@ -49,6 +49,7 @@
     "eslint-config-next": "13.4.13",
     "framer-motion": "10.18.0",
     "html-react-parser": "5.1.1",
+    "lenis": "^1.1.6",
     "lucide-react": "0.316.0",
     "next": "13.5.4",
     "next-themes": "0.2.1",

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -8,6 +8,7 @@ import AnimatedCursor from "react-animated-cursor";
 import ScrollToTop from "@/components/ScrollToTop/scrolltotop";
 
 import { Providers } from "./providers";
+import LenisWrapper from "@/helper/leniswrapper";
 
 const poppinsFont = Poppins({
   subsets: ["latin"],
@@ -49,6 +50,7 @@ export const metadata: Metadata = {
 
 export default async function RootLayout({ children }: { children: React.ReactNode }) {
   return (
+    <LenisWrapper>
     <html
       lang="en"
       className={`${poppinsFont.className} scrollbar-thin scrollbar-thumb-primary scrollbar-track-secondary-light scrollbar-track-rounded-full`}
@@ -90,5 +92,6 @@ export default async function RootLayout({ children }: { children: React.ReactNo
         <ScrollToTop />
       </body>
     </html>
+    </LenisWrapper>
   );
 }
diff --git a/src/helper/leniswrapper.tsx b/src/helper/leniswrapper.tsx
@@ -0,0 +1,18 @@
+// src/components/LenisWrapper.tsx
+'use client';
+
+import React, { ReactNode } from 'react';
+import useLenis from './useLenis';
+
+
+interface LenisWrapperProps {
+  children: ReactNode;
+}
+
+const LenisWrapper: React.FC<LenisWrapperProps> = ({ children }) => {
+  useLenis();
+
+  return <>{children}</>;
+};
+
+export default LenisWrapper;
diff --git a/src/helper/useLenis.ts b/src/helper/useLenis.ts
@@ -0,0 +1,18 @@
+'use client'
+import { useEffect } from 'react';
+import Lenis from 'lenis';
+
+const useLenis = () => {
+  useEffect(() => {
+    const lenis = new Lenis();
+
+    function raf(time:any) {
+      lenis.raf(time);
+      requestAnimationFrame(raf);
+    }
+
+    requestAnimationFrame(raf);
+  }, []);
+};
+
+export default useLenis;