Skip to content

The React component for Vercount, a simple website counter powered by NextJS.

License

Notifications You must be signed in to change notification settings

EvanNotFound/vercount-react

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vercount react banner@3x

vercount-react

vercount-react is a React hook designed for Vercount, a fast and efficient website counter powered by Next.js and Redis. It provides real-time website traffic statistics while being reliable, fast, and secure.

If you want to use Vercount as plain JavaScript, check out the vercount repository.

Why Choose Vercount?

Vercount is designed to replace slower and less reliable counters like Busuanzi. Key features include:

  • Speed: Server response times under 10ms.
  • Reliability: Choose between a China-optimized version or Vercel's global CDN with 99.99% uptime.
  • Accurate Tracking: Uses POST requests for improved counting, avoiding the limitations of Referrer-based methods.
  • Security: Utilizes JSON callbacks to prevent CSRF attacks, moving away from vulnerable JSONP methods.
  • Data Sync: Automatic synchronization with Busuanzi data—no manual work required.
  • Compatibility: Seamless integration with existing Busuanzi tags.

Installation

Install vercount-react using your preferred package manager:

# With npm
npm install vercount-react

# With pnpm
pnpm install vercount-react

# With yarn
yarn add vercount-react

Usage

To retrieve traffic statistics for your site or page, import the useVercount hook from vercount-react and use it in your React components.

Example:

import { useVercount } from 'vercount-react'

export default function Home() {
  const { sitePv, pagePv, siteUv } = useVercount()

  return (
    <div>
      <h1>Site Page Views: {sitePv}</h1>
      <h2>Page Views: {pagePv}</h2>
      <h2>Unique Visitors: {siteUv}</h2>
    </div>
  )
}

In this example:

  • sitePv: Total page views across the entire site.
  • pagePv: Page views for the current page.
  • siteUv: Unique visitors to the site.

Documentation

useVercount Hook

The useVercount hook is the core of vercount-react. It fetches traffic statistics for the site and page using Vercount’s backend. Here's a breakdown of how it works:

const { sitePv, pagePv, siteUv } = useVercount()

Return Values:

  • sitePv (number): The total number of page views across the entire website.
  • pagePv (number): The number of page views on the current page.
  • siteUv (number): The number of unique visitors to the website.

Support the Project

Vercount is a community-driven project, and your contributions help sustain and enhance it. Visit my donation page to support the project, or check out my other initiatives.


For additional information, visit the Vercount official website.

Disclaimer

All rights reserved by EvanNotFound.

About

The React component for Vercount, a simple website counter powered by NextJS.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published