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 🟦!

Install the package using your favorite package manager:

npm install react-siteviews

📁 App.jsx or App.tsx

import SiteViews from "react-siteviews";

const App = () => {
  return (
    <SiteViews
      projectName="site views documentation"
      visited={() => {
        alert("Website visited 🎉");
      }}
      getData={(value) => {
        console.log(value); // 👥 Array of visitor data
      }}
      refresh="10" // 🔄 Auto-refresh every 10s
      suppressLogs // 🔇 Hide logs
      style={{ color: "red" }}
    >
      Loading...
    </SiteViews>
  );
};

export default App;

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

📁 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 🎉");
      }}
      getData={(value) => {
        console.log(value); // 👥 Array of visitor data
      }}
      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.

446

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

• 🧑‍💼 Portfolio visit counters
• 📈 Landing page or marketing page metrics

• 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!

Licensed under the MIT License.

Built for simplicity. Track with ease 💖 — and stay informed 🚀.