Molecule.dev

@molecule/app-analytics-react

Feature · analytics · App (browser) · v1.0.2 · Apache-2.0

React bindings for @molecule/app-analytics (route listener)

npm install @molecule/app-analytics-react

npm · Source on GitHub

How it works

@molecule/app-analytics-react is a ready-made analytics feature for the app (browser) side. It composes the core interfaces it needs, so it works with whichever providers your app has bonded.

import { AnalyticsRouteListener } from '@molecule/app-analytics-react'
import { BrowserRouter, Routes, Route } from 'react-router'

export function App() {
  return (
    <BrowserRouter>
      <AnalyticsRouteListener />
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </BrowserRouter>
  )
}

Works with: @molecule/app-analytics

Reference

React bindings for @molecule/app-analytics.

Provides ready-made React components that consume the wired analytics bond. Currently exports AnalyticsRouteListener, a render-free component that fires a page event on every client-side route change.

Mount AnalyticsRouteListener once inside a BrowserRouter subtree — it listens for useLocation() changes and forwards each pathname / search change to the wired analytics bond's page().

Auto-generated, AI-first package reference for the molecule.dev ecosystem. It is written to be read by coding agents as much as by people, and is generated from this package's source — edit src/index.ts JSDoc, not this file.

Quick Start

import { AnalyticsRouteListener } from '@molecule/app-analytics-react'
import { BrowserRouter, Routes, Route } from 'react-router'

export function App() {
  return (
    <BrowserRouter>
      <AnalyticsRouteListener />
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </BrowserRouter>
  )
}

Type

feature

Installation

npm install @molecule/app-analytics-react @molecule/app-analytics react react-router
npm install -D @types/react

API

Functions

AnalyticsRouteListener()

Records a page_view on client-side route changes.

Mount once inside a BrowserRouter subtree. On every pathname / search change, dispatches a page event through the wired analytics bond. Renders nothing.

function AnalyticsRouteListener(): null

Returns: Always null — this component renders nothing.

Injection Notes

Requirements

Peer dependencies:

  • @molecule/app-analytics ^1.0.1
  • react ^18.0.0 || ^19.0.0
  • react-router ^7.0.0 || ^8.0.0

Runtime Dependencies

  • @molecule/app-analytics
  • react
  • react-router