@junglans/trail-react
React Components, Automated Trackers, On-Page Visual Heatmaps & Analytics Widget
A lightweight, battle-tested React library providing automated DOM interaction trackers, rage-click and dead-click detection, Core Web Vitals monitoring, and a floating admin drawer with a live radial heatmap overlay.
1. Installation
Install @junglans/trail-react using your favorite package manager. All dependencies are minimal and zero-leakage.
npm install @junglans/trail-react2. Quickstart & Implementation
Get up and running in less than 30 seconds. Copy and paste the code snippets below directly into your codebase.
import React from 'react';
import { TrailProvider, TrailWidget } from '@junglans/trail-react';
export default function App() {
return (
<TrailProvider
endpoint="/api/jungtrail"
autoTrackPageViews={true}
autoTrackClicks={true}
autoTrackErrors={true}
autoTrackVitals={true}
>
<RouterView />
{/* Floating admin badge that expands into live heatmap and analytics */}
<TrailWidget adminKey="demo-admin-key" position="bottom-right" />
</TrailProvider>
);
}3. Components & Hooks
Exported components and hooks available from @junglans/trail-react.
<TrailProvider>
Context provider wrapping your React application. Manages batch event aggregation, session cookies, offline queue fallback, and telemetry network transport.
<TrailWidget>
Floating developer/admin widget. Displays a toggleable on-page radial canvas heatmap, real-time visitor count, session timeline, and instant diagnostics drawer.
useAnalytics()
Hook exposing programmatic telemetry methods: trackEvent, trackPurchase, trackCartAdd, trackExperiment, trackNps, trackCsat, trackError, and flush.