{"id":19449941,"url":"https://github.com/Salman-Ahamed/Counter-Up-Trigger","last_synced_at":"2025-09-14T05:31:01.908Z","repository":{"id":176569480,"uuid":"659128674","full_name":"Salman-Ahamed/Counter-Up-Trigger","owner":"Salman-Ahamed","description":"Counter Up Trigger Made in its own way combination with react-scroll-trigger and react-countup  ","archived":false,"fork":false,"pushed_at":"2023-06-27T08:07:43.000Z","size":67,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-28T09:08:44.609Z","etag":null,"topics":["counter","counterup","nextjs","nextjs13","react","scrolltrigger","tailwindcss","tawilwind","ts","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Salman-Ahamed.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-06-27T07:40:19.000Z","updated_at":"2024-05-07T07:39:30.000Z","dependencies_parsed_at":"2023-07-21T20:24:21.664Z","dependency_job_id":null,"html_url":"https://github.com/Salman-Ahamed/Counter-Up-Trigger","commit_stats":null,"previous_names":["shahriyar-hosen/counter-up-trigger","salman-ahamed/counter-up-trigger"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Salman-Ahamed/Counter-Up-Trigger","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Salman-Ahamed%2FCounter-Up-Trigger","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Salman-Ahamed%2FCounter-Up-Trigger/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Salman-Ahamed%2FCounter-Up-Trigger/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Salman-Ahamed%2FCounter-Up-Trigger/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Salman-Ahamed","download_url":"https://codeload.github.com/Salman-Ahamed/Counter-Up-Trigger/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Salman-Ahamed%2FCounter-Up-Trigger/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":275063147,"owners_count":25398927,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-14T02:00:10.474Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["counter","counterup","nextjs","nextjs13","react","scrolltrigger","tailwindcss","tawilwind","ts","typescript"],"created_at":"2024-11-10T16:34:31.152Z","updated_at":"2025-09-14T05:31:01.617Z","avatar_url":"https://github.com/Salman-Ahamed.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eCounter Up Trigger\u003c/h1\u003e\n\n### Interface\n\n```ts\nexport interface ICounterCard {\n  maxCount: number;\n  label: string;\n  title: string;\n}\n```\n\n### Counter Card Component\n\n```tsx\nimport { ICounterCard } from \"@/Interface\";\nimport { useEffect, useRef, useState } from \"react\";\n\nexport const CounterCard = ({ label, title, maxCount }: ICounterCard) =\u003e {\n  const [count, setCount] = useState\u003cnumber\u003e(0);\n  const [isVisible, setIsVisible] = useState\u003cboolean\u003e(false);\n  const sectionRef = useRef\u003cHTMLDivElement | null\u003e(null);\n\n// Update isVisible State. up and down trigger the counter\n  useEffect(() =\u003e {\n    const observer = new IntersectionObserver((entries) =\u003e {\n      const [entry] = entries;\n      setIsVisible(entry.isIntersecting);\n    });\n\n    if (sectionRef.current) {\n      observer.observe(sectionRef.current);\n    }\n\n// Cleanup the observer when the component is unmounted\n    return () =\u003e {\n      if (sectionRef.current) {\n        observer.unobserve(sectionRef.current);\n      }\n    };\n  }, [sectionRef, setIsVisible]);\n\n// Update counter and duration time duration \n  useEffect(() =\u003e {\n    let intervalId: NodeJS.Timeout;\n\n    if (isVisible) {\n      intervalId = setInterval(() =\u003e {\n        if (count \u003c maxCount) {\n          setCount((prevCount) =\u003e prevCount + 1);\n        } else {\n          clearInterval(intervalId);\n        }\n      }, 20); // Adjust the interval duration as needed\n    }\n\n  // Cleanup the interval when the component is unmounted or when visibility changes\n    return () =\u003e {\n      clearInterval(intervalId);\n    };\n  }, [isVisible, count, setCount]);\n\n  return (\n    \u003cdiv\n      ref={sectionRef}\n      className=\"flex gap-5 md:gap-9 justify-center items-center lg:items-start flex-col text-center lg:text-start w-full\"\n    \u003e\n      \u003ch1 className=\"text-4xl md:text-5xl font-extrabold\"\u003e\n        {count}\n        \u003cspan className=\"text-primary\"\u003e{label}\u003c/span\u003e\n      \u003c/h1\u003e\n      \u003cp className=\"text-base md:text-xl font-bold\"\u003e{title}\u003c/p\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n### Counter Main Component\n\n```tsx\nimport { CounterCard } from \"@/components\";\n\nconst CounterUpTrigger = () =\u003e (\n  \u003cmain className=\"w-screen h-screen flex flex-col justify-center items-center\"\u003e\n    \u003cdiv className=\"bg-green-500 py-12 px-8 md:py-20 md:px-16 w-fit lg:w-full max-w-6xl mx-auto rounded-[32px] grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 justify-items-center\"\u003e\n      \u003cCounterCard maxCount={100} label=\"M\" title=\"Client Satisfaction\" /\u003e\n      \u003cCounterCard maxCount={24} label=\" h\" title=\"Expert Support Team\" /\u003e\n      \u003cCounterCard maxCount={98} label=\" k+\" title=\"Sales Count\" /\u003e\n      \u003cCounterCard maxCount={208} label=\" +\" title=\"Client Worldwide\" /\u003e\n    \u003c/div\u003e\n  \u003c/main\u003e\n);\n\nexport default CounterUpTrigger;\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSalman-Ahamed%2FCounter-Up-Trigger","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSalman-Ahamed%2FCounter-Up-Trigger","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSalman-Ahamed%2FCounter-Up-Trigger/lists"}