https://github.com/Salman-Ahamed/Counter-Up-Trigger
Counter Up Trigger Made in its own way combination with react-scroll-trigger and react-countup
https://github.com/Salman-Ahamed/Counter-Up-Trigger
counter counterup nextjs nextjs13 react scrolltrigger tailwindcss tawilwind ts typescript
Last synced: 3 months ago
JSON representation
Counter Up Trigger Made in its own way combination with react-scroll-trigger and react-countup
- Host: GitHub
- URL: https://github.com/Salman-Ahamed/Counter-Up-Trigger
- Owner: Salman-Ahamed
- Created: 2023-06-27T07:40:19.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-06-27T08:07:43.000Z (over 2 years ago)
- Last Synced: 2025-06-28T09:08:44.609Z (6 months ago)
- Topics: counter, counterup, nextjs, nextjs13, react, scrolltrigger, tailwindcss, tawilwind, ts, typescript
- Language: TypeScript
- Homepage:
- Size: 65.4 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Counter Up Trigger
### Interface
```ts
export interface ICounterCard {
maxCount: number;
label: string;
title: string;
}
```
### Counter Card Component
```tsx
import { ICounterCard } from "@/Interface";
import { useEffect, useRef, useState } from "react";
export const CounterCard = ({ label, title, maxCount }: ICounterCard) => {
const [count, setCount] = useState(0);
const [isVisible, setIsVisible] = useState(false);
const sectionRef = useRef(null);
// Update isVisible State. up and down trigger the counter
useEffect(() => {
const observer = new IntersectionObserver((entries) => {
const [entry] = entries;
setIsVisible(entry.isIntersecting);
});
if (sectionRef.current) {
observer.observe(sectionRef.current);
}
// Cleanup the observer when the component is unmounted
return () => {
if (sectionRef.current) {
observer.unobserve(sectionRef.current);
}
};
}, [sectionRef, setIsVisible]);
// Update counter and duration time duration
useEffect(() => {
let intervalId: NodeJS.Timeout;
if (isVisible) {
intervalId = setInterval(() => {
if (count < maxCount) {
setCount((prevCount) => prevCount + 1);
} else {
clearInterval(intervalId);
}
}, 20); // Adjust the interval duration as needed
}
// Cleanup the interval when the component is unmounted or when visibility changes
return () => {
clearInterval(intervalId);
};
}, [isVisible, count, setCount]);
return (
{count}
{label}
{title}
);
};
```
### Counter Main Component
```tsx
import { CounterCard } from "@/components";
const CounterUpTrigger = () => (
);
export default CounterUpTrigger;
```