React User Tracking

A lightweight, flexible tracking library for React applications with heat map visualization.

!npm
!Bundle Size
!MIT License

Features

- 📊 Automatic page view tracking
- 🖱️ Element click tracking
- 📝 Form submission tracking
- 🗺️ Click heat maps with customizable visualization
- 📱 Device and browser detection
- 🔄 Batched event sending
- 🚪 Handles page unload events
- 📋 Debug toast component

Installation

``bash
npm install react-user-tracking


or


yarn add react-user-tracking
`

Quick Start

Wrap your application with the TrackingProvider:

`jsx
import { TrackingProvider, TrackingToast } from 'react-user-tracking';

function App() {
return (


{/ Optional debug component /}

);
}
`

Basic Usage

$3

Automatically track when a component mounts, useful for SPA navigation:

`jsx
import { usePageViewTracking } from 'react-user-tracking';

function HomePage() {
// Automatically tracks when this component mounts
usePageViewTracking();

return

;
}
`

You can also specify a custom path:

`jsx
// For custom path tracking
usePageViewTracking('/custom-path-name');
`

$3

Track clicks on specific elements:

`jsx
import { useRef } from 'react';
import { useClickTracking } from 'react-user-tracking';

function SignupButton() {
const buttonRef = useRef(null);

// Track clicks on this button with category and label
useClickTracking(buttonRef, 'cta', 'signup');

return (

Sign Up

);
}
`

$3

For more detailed position data and improved heat map tracking:

`jsx
import { useRef } from 'react';
import { useEnhancedClickTracking } from 'react-user-tracking';

function ProductCard({ product, pageIdentifier }) {
const cardRef = useRef(null);

// Enhanced tracking with category, label, and page identifier
useEnhancedClickTracking(
cardRef,
'product',
view-${product.id},
pageIdentifier
);

return (



);
}
`

$3

Track form submissions with field metadata:

`jsx
import { useRef } from 'react';
import { useFormTracking } from 'react-user-tracking';

function ContactForm() {
const formRef = useRef(null);

// Track form submissions
useFormTracking(formRef, 'contact');

return (




<br /> <button type="submit">Send</button><br /> </form><br /> );<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Track custom events programmatically:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br />import { useTracking } from 'react-user-tracking';</p><p class="my-3">function FeatureComponent() {<br /> const { trackEvent } = useTracking();<br /> <br /> const handleFeatureUse = (feature, action) => {<br /> // Track a custom event<br /> trackEvent('feature_used', {<br /> metadata: {<br /> featureId: feature,<br /> action: action<br /> }<br /> });<br /> <br /> // Feature logic...<br /> };<br /> <br /> return (<br /> <div><br /> <button onClick={() => handleFeatureUse('image-editor', 'crop')}><br /> Crop Image<br /> </button><br /> <button onClick={() => handleFeatureUse('image-editor', 'rotate')}><br /> Rotate Image<br /> </button><br /> </div><br /> );<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Heat Map Visualization</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">The simplest way to add a heat map to your app:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br />import { HeatMapOverlay } from 'react-user-tracking';</p><p class="my-3">function App() {<br /> return (<br /> <div><br /> <YourAppContent /><br /> <HeatMapOverlay enabled={false} /> {/<em> Hidden by default, toggle with Alt+H </em>/}<br /> </div><br /> );<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">For more control over your heat map visualization:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br />import { HeatMapOverlay } from 'react-user-tracking';</p><p class="my-3">function AnalyticsPage() {<br /> return (<br /> <div><br /> <h1>User Interaction Analytics</h1><br /> <br /> <HeatMapOverlay <br /> enabled={true} // Start visible<br /> pageIdentifier="/product-page" // Show data for specific page <br /> controls={true} // Show the control panel<br /> /><br /> </div><br /> );<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">For complete control, use the underlying visualization component:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br />import { useState } from 'react';<br />import { HeatMapVisualization, usePageHeatMapTracking } from 'react-user-tracking';</p><p class="my-3">function CustomHeatMap() {<br /> // Start tracking clicks on this page<br /> usePageHeatMapTracking();<br /> <br /> // Custom colors<br /> const customColors = {<br /> low: 'rgba(0, 128, 255, 0.6)', // Blue<br /> medium: 'rgba(255, 100, 0, 0.7)', // Orange<br /> high: 'rgba(200, 0, 0, 0.8)', // Red<br /> };<br /> <br /> // Time filter (show only last 24 hours)<br /> const dayAgo = new Date();<br /> dayAgo.setDate(dayAgo.getDate() - 1);<br /> <br /> const timeFilter = {<br /> startTime: dayAgo.getTime(),<br /> // Optional: categories: ['button', 'link'] - filter by event categories<br /> };<br /> <br /> return (<br /> <div style={{ position: 'relative', width: '100%', height: '800px' }}><br /> <HeatMapVisualization <br /> pointRadius={25}<br /> maxOpacity={0.7}<br /> colors={customColors}<br /> threshold={15} // Clicks needed for maximum intensity<br /> showLabels={true} // Show click counts<br /> filter={timeFilter}<br /> /><br /> </div><br /> );<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Debug Toast Component</h2></p><p class="my-3">Add the debug toast to see events in real-time:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br />import { TrackingToast } from 'react-user-tracking';</p><p class="my-3">function App() {<br /> return (<br /> <div><br /> <YourApp /><br /> <TrackingToast privacyUrl="/your-privacy-page" /><br /> </div><br /> );<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Advanced Configuration</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Customize the tracking endpoint and behavior:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br />import { trackingService } from 'react-user-tracking';</p><p class="my-3">// Configure before initializing your app<br />trackingService.configure({<br /> apiEndpoint: 'https://analytics.yoursite.com/track',<br /> flushInterval: 10000, // 10 seconds<br /> batchSize: 30 // Send every 30 events<br />});<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Access all tracking functionality through the context:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br />import { useTracking } from 'react-user-tracking';</p><p class="my-3">function AnalyticsComponent() {<br /> const { trackEvent, events, sessionId } = useTracking();<br /> <br /> return (<br /> <div><br /> <h2>Session Analytics</h2><br /> <p>Session ID: {sessionId}</p><br /> <p>Total Events: {events.length}</p><br /> <p>Page Views: {events.filter(e => e.eventType === 'pageview').length}</p><br /> <p>Clicks: {events.filter(e => e.eventType === 'click').length}</p><br /> <br /> <button onClick={() => trackEvent('custom_event', { <br /> metadata: { triggered: 'manually' } <br /> })}><br /> Track Custom Event<br /> </button><br /> </div><br /> );<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Server-Side Integration</h2></p><p class="my-3">Send events to your own analytics backend:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />// Server endpoint (Express example)<br />app.post('/api/track', (req, res) => {<br /> const events = req.body;<br /> <br /> // Process events<br /> events.forEach(event => {<br /> // Store in database<br /> db.collection('events').insertOne(event);<br /> <br /> // Forward to external analytics service if needed<br /> // externalAnalytics.send(event);<br /> });<br /> <br /> res.status(200).send({ status: 'success' });<br />});<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Use with Popular React Frameworks</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br />// pages/_app.js<br />import { TrackingProvider, TrackingToast } from 'react-user-tracking';</p><p class="my-3">function MyApp({ Component, pageProps }) {<br /> return (<br /> <TrackingProvider><br /> <Component {...pageProps} /><br /> <TrackingToast /><br /> </TrackingProvider><br /> );<br />}</p><p class="my-3">export default MyApp;<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br />// In your route components<br />import { useEffect } from 'react';<br />import { useLocation } from 'react-router-dom';<br />import { usePageViewTracking } from 'react-user-tracking';</p><p class="my-3">function RouteTracker() {<br /> const location = useLocation();<br /> <br /> // Track page views on route changes<br /> usePageViewTracking(location.pathname);<br /> <br /> return null;<br />}</p><p class="my-3">// Add to your app<br />function App() {<br /> return (<br /> <Router><br /> <TrackingProvider><br /> <RouteTracker /><br /> <Routes><br /> {/<em> Your routes </em>/}<br /> </Routes><br /> <TrackingToast /><br /> </TrackingProvider><br /> </Router><br /> );<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Complete API Reference</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Provides tracking context to all child components.</p><p class="my-3"><strong>Props:</strong><br />- </code>children<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - React nodes to be wrapped by the provider</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Access the tracking context and its functionality.</p><p class="my-3"><strong>Returns:</strong><br />- </code>trackEvent(eventType, data?)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - Track a custom event<br />- </code>events<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - Array of all tracked events<br />- </code>sessionId<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - Current tracking session ID</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Track page views when a component mounts.</p><p class="my-3"><strong>Parameters:</strong><br />- </code>path?<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - Optional custom path to track instead of current URL</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Track clicks on a specific element.</p><p class="my-3"><strong>Parameters:</strong><br />- </code>ref<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - React ref to the element to track<br />- </code>category?<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - Optional category for the click event<br />- </code>label?<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - Optional label for the click event</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Track clicks with detailed position data for heat maps.</p><p class="my-3"><strong>Parameters:</strong><br />- </code>ref<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - React ref to the element to track<br />- </code>category?<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - Optional category for the click event<br />- </code>label?<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - Optional label for the click event<br />- </code>pageIdentifier?<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - Optional page identifier for heat mapping</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Track all page clicks for heat map visualization.</p><p class="my-3"><strong>Parameters:</strong><br />- </code>pageIdentifier?<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - Optional page identifier for heat mapping</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Track form submissions.</p><p class="my-3"><strong>Parameters:</strong><br />- </code>formRef<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - React ref to the form element<br />- </code>formName<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - Name identifier for the form</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Debug component showing tracking activity.</p><p class="my-3"><strong>Props:</strong><br />- </code>privacyUrl?<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - URL to your privacy policy page (default: '/privacy')</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Heat map visualization with controls.</p><p class="my-3"><strong>Props:</strong><br />- </code>pageIdentifier?<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - Page identifier to show data for (default: current path)<br />- </code>enabled?<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - Whether to show the heat map initially (default: false)<br />- </code>controls?<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - Whether to show the control panel (default: true)</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Low-level heat map visualization component.</p><p class="my-3"><strong>Props:</strong><br />- </code>pageIdentifier?<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - Page identifier to show data for<br />- </code>width?<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - Width of the heat map canvas<br />- </code>height?<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - Height of the heat map canvas<br />- </code>pointRadius?<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - Radius of heat points<br />- </code>maxOpacity?<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - Maximum opacity of heat points<br />- </code>colors?<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - Color scheme for heat points<br />- </code>threshold?<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - Number of clicks to reach maximum intensity<br />- </code>showLabels?<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - Whether to show click count labels<br />- </code>filter?<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - Filter by time range and categories</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Direct API for tracking and configuration.</p><p class="my-3"><strong>Methods:</strong><br />- </code>track(eventType, data?)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - Track a custom event<br />- </code>flush(immediate?)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - Manually send queued events<br />- </code>configure(options)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - Configure the tracking service</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Event Types</h2></p><p class="my-3">The library uses the following standard event types:</p><p class="my-3">- </code>pageview<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - Page view events<br />- </code>click<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - Element click events<br />- </code>heatmap_click<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - Background clicks for heat maps<br />- </code>form_submit` - Form submission events</p><p class="my-3">You can define your own custom event types for your app's specific needs.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">License</h2></p><p class="my-3">MIT<br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div></div><script>self.__next_f.push([1,"25:[\"$\",\"path\",\"cbrjhi\",{\"d\":\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"}]\n26:[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 ml-auto text-xs\",\"children\":4}]\n"])</script><script>self.__next_f.push([1,"27:[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1 sm:grid-cols-2 lg:grid-cols-3\",\"children\":[[\"$\",\"$L5\",\"@types/node\",{\"href\":\"/package/%40types%2Fnode\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@types/node\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^22.15.3\"}]]}],[\"$\",\"$L5\",\"@types/react\",{\"href\":\"/package/%40types%2Freact\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@types/react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^18.0.0\"}]]}],[\"$\",\"$L5\",\"@types/react-dom\",{\"href\":\"/package/%40types%2Freact-dom\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@types/react-dom\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^18.0.0\"}]]}],[\"$\",\"$L5\",\"typescript\",{\"href\":\"/package/typescript\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"typescript\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.9.5\"}]]}]]}]}]\n"])</script><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>