added scroll counting effect

Author: KARANSINGH34951

.env.sample

@@ -14,6 +14,7 @@
     "progressbar": "^1.3.0",
     "react": "^18.2.0",
     "react-chartjs-2": "^5.2.0",
+    "react-countup": "^6.5.3",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.45.4",
@@ -25,6 +26,7 @@
     "react-redux": "^8.1.2",
     "react-router-dom": "^6.14.2",
     "react-scripts": "5.0.1",
+    "react-scroll-trigger": "^0.6.14",
     "react-super-responsive-table": "^5.2.2",
     "react-type-animation": "^3.1.0",
     "redux": "^4.2.1",

package-lock.json

@@ -1,27 +1,35 @@
-import React from "react";
+import React, {useState} from "react";
+import CountUp from 'react-countup';
+import ScrollTrigger from 'react-scroll-trigger';
 const data = [
-  { count: "5K", label: "Active Students" },
-  { count: "10+", label: "Mentors" },
-  { count: "200+", label: "Courses" },
-  { count: "50+", label: "Awards" },
+  { count: "5000", label: "Active Students" },
+  { count: "10", label: "Mentors" },
+  { count: "200", label: "Courses" },
+  { count: "50", label: "Awards" },
 ];
 export default function Stats() {
+  const [count, setCount] = useState(false)
   return (
     <div className="flex flex-col gap-10 justify-between w-11/12 max-w-maxContent text-white mx-auto ">
+      
       <div className="grid grid-cols-2 md:grid-cols-4 text-center">
         {data.map((item, index) => {
           return (
+          <ScrollTrigger  onEnter={()=> setCount(true)} onExit={()=>setCount(false)}>
             <div className="flex flex-col py-10" key={index}>
               <h1 className="text-[30px] font-bold text-richblack-5">
-                {item.count}
+               {count && <CountUp start={0} end={item.count} duration={1}>
+                </CountUp>}+
               </h1>
               <h2 className="font-semibold text-[16px] text-richblack-500">
                 {item.label}
               </h2>
             </div>
+          </ScrollTrigger>
           );
         })}
       </div>
+      
     </div>
   );
 }