Learn react-clickmap
Guides, API references, and practical examples for building privacy-first heatmap analytics.
Overview
Start here — installation, architecture, and core concepts.
Guides
Step-by-step walkthroughs for common integration patterns.
Add-on Packages
react-clickmap ships first-party add-on packages for common integrations. The core library stays lightweight — install only what you need.
→Measurement definitions
Good heatmaps begin with explicit denominators.
→Next.js App Router Integration
Keep collection, inspection, and database access separate. Server credentials never belong in a client bundle.
→Persistence and self-hosting
Clickmap stores events through your adapter. A database adapter is a persistence primitive, not an authorization boundary.
→Privacy and capture controls
Clickmap avoids cookies and fingerprinting. It still handles interaction data and pseudonymous session identifiers; safe configuration and legal compliance depend on your application and deployment.
→Rendering and Performance Guide
This guide covers how react-clickmap renders heatmap overlays, the rendering engine tiers, and how to optimize performance for large datasets.
→Clickmap Studio
A developer installs capture and authorizes analytics access. Designers and developers inspect the same app and export the same evidence.
→API Reference
Detailed reference for every component, hook, and type.
Adapters API
Every adapter implements this interface. `save` and `load` are required; `deleteEvents` and `loadAggregated` are optional.
→Components API
Wraps your app tree. Starts capture listeners, manages the event batcher, and provides context to child components.
→Event Model API
Every interaction captured by react-clickmap produces a `CaptureEvent`. This page documents the event structure, types, and fields.
→Examples
Copy-paste recipes for specific use cases.
Example: Element Click Overlay
The `ElementClickOverlay` renders floating badges on top of your page's elements showing how many times each one was clicked. It's useful for quickly spotting which buttons, links, and interactive elements get the most attention — and which ones trigger rage or dead clicks.
→Example: Export Heatmap Image
The `<Heatmap>` component exposes an imperative handle via React ref that lets you export the rendered canvas as an image. Use this to build "Download as PNG" buttons, generate thumbnails, or pipe heatmap images into reports.
→