Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/evannotfound/vercount-react
The React component for Vercount, a simple website counter powered by NextJS.
https://github.com/evannotfound/vercount-react
nextjs react visitor-count visitor-counter website-counter
Last synced: 6 days ago
JSON representation
The React component for Vercount, a simple website counter powered by NextJS.
- Host: GitHub
- URL: https://github.com/evannotfound/vercount-react
- Owner: EvanNotFound
- License: gpl-3.0
- Created: 2024-10-21T17:51:48.000Z (15 days ago)
- Default Branch: main
- Last Pushed: 2024-10-22T02:49:51.000Z (15 days ago)
- Last Synced: 2024-10-22T21:46:03.289Z (14 days ago)
- Topics: nextjs, react, visitor-count, visitor-counter, website-counter
- Language: TypeScript
- Homepage: https://vercount.one
- Size: 154 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vercount-react
**vercount-react** is a React hook designed for [Vercount](https://github.com/EvanNotFound/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](https://github.com/EvanNotFound/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:
```bash
# 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:
```tsx
import { useVercount } from 'vercount-react'
export default function Home() {
const { sitePv, pagePv, siteUv } = useVercount()
return (
Site Page Views: {sitePv}
Page Views: {pagePv}
Unique Visitors: {siteUv}
)
}
```
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:
```tsx
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.
[//]: # (### Advanced Configuration)
[//]: # (#### Setting Custom Tags)
[//]: # (You can add custom tags to display specific statistics on your website, as Vercount will automatically replace these tags. Here are some common tags that you can use to display statistics directly on your website:)
[//]: # ()
[//]: # (```html)
[//]: # ()
[//]: # ()
[//]: # (Total Page Views: Loading times )
[//]: # (Total Site Views: Loading times )
[//]: # (Unique Visitors: Loading people)
[//]: # (```)
[//]: # (### Migrating from Busuanzi)
[//]: # ()
[//]: # (Vercount is fully compatible with Busuanzi’s tags. To migrate from Busuanzi:)
[//]: # (1. Replace your existing Busuanzi script with the Vercount script:)
[//]: # ( ```html)
[//]: # ( )
[//]: # ( ```)
[//]: # (2. You can keep your existing Busuanzi tags or update them with Vercount-specific IDs for extended features.)
[//]: # ()
[//]: # (#### Example Busuanzi to Vercount Migration:)
[//]: # (Replace:)
[//]: # (```html)
[//]: # ()
[//]: # (```)
[//]: # (With:)
[//]: # (```html)
[//]: # ()
[//]: # (```)
[//]: # ()
[//]: # (Existing tags like:)
[//]: # (```html)
[//]: # (Loading 次)
[//]: # (```)
[//]: # ()
[//]: # (Can be updated to:)
[//]: # (```html)
[//]: # (Loading 次)
[//]: # (```)
[//]: # ()
[//]: # (### Tracking Methodology)
[//]: # ()
[//]: # (- **Page Views (PV)**: Every page visit increments this value by one.)
[//]: # (- **Unique Visitors (UV)**: Calculated based on the user's browser UserAgent and IP address, providing a more accurate count than traditional referrer-based methods.)
[//]: # ()
[//]: # (## Quick Start)
[//]: # ()
[//]: # (Add one of the following scripts to your website to start tracking:)
[//]: # ()
[//]: # (### For China-Optimized Access:)
[//]: # (```html)
[//]: # ()
[//]: # (```)
[//]: # ()
[//]: # (### For Global Access:)
[//]: # (```html)
[//]: # ()
[//]: # (```)
[//]: # ()
[//]: # (After adding the script, you can use tags to display the stats, such as:)
[//]: # ()
[//]: # (```html)
[//]: # (Total Page Views: Loading times)
[//]: # (Total Site Views: Loading times)
[//]: # (Unique Visitors: Loading people)
[//]: # (```)
## Support the Project
Vercount is a community-driven project, and your contributions help sustain and enhance it. Visit my [donation page](https://evannotfound.com/sponsor) to support the project, or check out my other initiatives.
---
For additional information, visit the [Vercount official website](https://vercount.one).
## Disclaimer
All rights reserved by EvanNotFound.