React SiteViews Integration (React & Next.js)

Track page views and gather visitor information effortlessly using react-siteviews.
Supports both React and Next.js with zero backend setup and full support for JavaScript and TypeScript.

Installation

Install the package using your favorite package manager:

npm install react-siteviews

React Setup (Vite / CRA / Others)

Step-by-step:

App.jsx or App.tsx

import SiteViews from "react-siteviews";

const App = () => {
  return (
    <SiteViews
      projectName="site views documentation"
      visited={() => {
        alert("Website visited");
      }}
      refresh="10" // Auto-refresh every 10s
      suppressLogs // Hide logs
      style={{ color: "red" }}
    >
      Loading...
    </SiteViews>
  );
};

export default App;

Next.js Setup

Note: Since react-siteviews relies on browser APIs, it must be rendered on the client side only.

Step-by-step:

components/ViewsCounter.jsx or ViewsCounter.tsx

"use client";
import dynamic from "next/dynamic";

const SiteViews = dynamic(() => import("react-siteviews"), { ssr: false });

const ViewsCounter = () => {
  return (
    <SiteViews
      projectName="site views documentation"
      visited={() => {
        alert("Website visited");
      }}
      refresh="10" // Auto-refresh every 10s
      suppressLogs // Hide logs
      style={{ color: "red" }}
    >
      Loading...
    </SiteViews>
  );
};

export default ViewsCounter;

Use <ViewsCounter /> inside any page or layout to start tracking visits instantly.

Output Example

446

Displays the total number of visits.
Additional visitor data is available via the getData callback.

Available Props

Prop	Description
projectName	Required — Unique name for your site or page.
visited	Optional — Callback executed after a visit is successfully recorded.
refresh	Optional — Auto-refresh interval (in seconds).
className	Optional — Add custom class names.
style	Optional — Apply inline styles.
suppressLogs	Optional — Mute all console logs/warnings from SiteViews.

Common Use Cases

• Portfolio visit counters
• Landing page or marketing page metrics

Tips & Tricks

• Use refresh="10" to auto-update visit count every 10 seconds
• Combine getData with your app's state for dynamic dashboards
• Set unique projectName values for each route/page if needed
• Fully supports JavaScript and TypeScript environments out of the box

License

Licensed under the MIT License.

---

Built for simplicity. Track with ease.