Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-lens-analytics) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Lens Analytics

A powerful, privacy-focused analytics solution for React and Next.js applications that provides real-time insights into user behavior and page performance.

✨ Features

📊 Real-time Page View & User Analytics
🌍 Geographic Data Tracking
📱 Device & Browser Analytics
⚡ Zero-config Setup
🔒 Privacy-Compliant
🎯 Custom Event Tracking
🚀 Optimized for Performance
💻 Cross-platform Support

📦 Installation

npm install react-lens-analytics
# or
yarn add react-lens-analytics
# or
pnpm add react-lens-analytics

🚀 Quick Start

1. Create Your Project

Sign up at ReactLens Dashboard
Create a new project
Copy your project secret from the dashboard

2. Configuration

Option A: Using Environment Variables (Recommended)

Create a .env file in your project root:

PROJECT_SECRET=your_project_secret_here  # For React
# or
NEXT_PUBLIC_PROJECT_SECRET=your_project_secret_here  # For Next.js

Option B: Direct Implementation

You can also pass your project secret directly (not recommended for production):

<Analytics projectId="your_project_secret_here" />

3. Implementation

For React Applications

// App.tsx or your root component
import { Analytics } from 'react-lens-analytics'

function App() {
  return (
    <>
      <YourAppComponents />
      <Analytics 
        projectId={process.env.PROJECT_SECRET!}
      />
    </>
  )
}

For Next.js Applications

// components/Analytics.tsx
'use client'
import { Analytics } from 'react-lens-analytics'

export function AnalyticsWrapper() {
  return (
    <Analytics 
      projectId={process.env.NEXT_PUBLIC_PROJECT_SECRET!}
    />
  )
}

// app/layout.tsx
import { AnalyticsWrapper } from '@/components/Analytics'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <AnalyticsWrapper />
      </body>
    </html>
  )
}

📊 Analytics Dashboard

Access your analytics at ReactLens Dashboard to view:

Real-time Metrics

👥 Active Users
📱 Device Distribution
🌍 Geographic Data
📊 Page Performance

<Analytics 
  projectId="your_project_secret"
/>

🔒 Privacy Compliance

React Lens Analytics is designed with privacy in mind:

GDPR Compliant
No Personal Data Collection
Anonymous Traffic Analysis
Cookie-less Tracking Option

🤝 Support

📚 Documentation
💬 Discord Community
📧 Email: kartikmalikdevofficial@gmail.com
🐛 Issue Tracker

📝 License

Made with ❤️ by Kartik Malik