# 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
```bash
npm install react-lens-analytics
# or
yarn add react-lens-analytics
# or
pnpm add react-lens-analytics
```
## 🚀 Quick Start
### 1. Create Your Project
1. Sign up at [ReactLens Dashboard](https://reactlens.kartikmalik.tech)
2. Create a new project
3. Copy your project secret from the dashboard
### 2. Configuration
#### Option A: Using Environment Variables (Recommended)
Create a `.env` file in your project root:
```env
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):
```tsx
```
### 3. Implementation
#### For React Applications
```tsx
// App.tsx or your root component
import { Analytics } from 'react-lens-analytics'
function App() {
return (
<>
)
}
```
#### For Next.js Applications
```tsx
// components/Analytics.tsx
'use client'
import { Analytics } from 'react-lens-analytics'
export function AnalyticsWrapper() {
return (
)
}
// app/layout.tsx
import { AnalyticsWrapper } from '@/components/Analytics'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
{children}
)
}
```
## 📊 Analytics Dashboard
Access your analytics at [ReactLens Dashboard](https://reactlens.kartikmalik.tech) to view:
### Real-time Metrics
- 👥 Active Users
- 📱 Device Distribution
- 🌍 Geographic Data
- 📊 Page Performance
```tsx
```
## 🔒 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](https://docs.kartikmalik.tech)
- 💬 [Discord Community](https://discord.gg/daUeprZqPB)
- 📧 Email: kartikmalikdevofficial@gmail.com
- 🐛 [Issue Tracker](https://github.com/kartikmalik0/react-lens-analytics/issues)
## 📝 License
MIT © [Kartik Malik](https://github.com/kartikmalik0)
---
Made with ❤️ by Kartik Malik