{"library":"react-tracking","title":"Declarative Tracking for React Apps","description":"react-tracking is a declarative and imperative tracking library specifically designed for React applications. It provides an analytics platform-agnostic solution, empowering developers to manage and dispatch user interaction data effectively. The library's core philosophy is to compartmentalize tracking concerns directly within individual components, thereby preventing data leakage and ensuring a clean separation of concerns across the entire application. It offers a dual API approach, supporting both the traditional Higher-Order Component (HoC) or decorator pattern and a modern React Hooks API, which was fully introduced in version 8.1.0 for functional components. The current stable version, 9.3.2, has recently addressed compatibility issues with React Native environments and re-enabled support for Node.js 16.9+. Developed by The New York Times, react-tracking is actively maintained, with a consistent cadence of patch and minor releases addressing bug fixes and introducing new features like `mergeOptions` (v9.3.0) and `deepmerge` re-export (v9.2.0). Its key differentiators include its highly declarative nature, flexibility to integrate seamlessly with virtually any analytics backend, and comprehensive support for both class-based and modern functional React components, making it a versatile choice for instrumenting React UIs.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-tracking"],"cli":null},"imports":["import track from 'react-tracking';","import { useTracking } from 'react-tracking';","import { Track } from 'react-tracking';","import { deepmerge } from 'react-tracking';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useEffect } from 'react';\nimport { useTracking, Track } from 'react-tracking';\n\ninterface MyComponentProps {\n  userId: string;\n  pageName: string;\n}\n\nconst ProductPage: React.FC<MyComponentProps> = ({ userId, pageName }) => {\n  // Initialize tracking for this component, passing contextual data\n  const { Track, trackEvent, getTrackingData } = useTracking(\n    {\n      page: pageName,\n      user: userId,\n      environment: process.env.NODE_ENV ?? 'development',\n    },\n    {\n      // Optional: Dispatch tracking data when component mounts\n      dispatchOnMount: true,\n      // Optional: Custom merge options for tracking objects (since v9.3.0)\n      mergeOptions: {\n        isMergeableObject: obj => !(obj instanceof Date || obj instanceof RegExp),\n      },\n    }\n  );\n\n  useEffect(() => {\n    // Example: Log current tracking data when component mounts\n    console.log('Current tracking context:', getTrackingData());\n  }, []);\n\n  const handleProductClick = (productId: string) => {\n    // Imperatively dispatch an event\n    trackEvent({\n      action: 'product_click',\n      productId: productId,\n      timestamp: new Date().toISOString(),\n    });\n  };\n\n  return (\n    <Track> {/* Use <Track> to pass context to children */}\n      <div>\n        <h1>{pageName} for User: {userId}</h1>\n        <p>This is a product page example.</p>\n        <button onClick={() => handleProductClick('product-123')}>\n          Click to Track Product 123\n        </button>\n        <button onClick={() => trackEvent({ action: 'promo_view', promoId: 'summer_sale' })}>\n          Track Promo View\n        </button>\n      </div>\n    </Track>\n  );\n};\n\n// Example of usage:\n// <ProductPage userId=\"user-abc\" pageName=\"Electronics-Category\" />\nexport default ProductPage;","lang":"typescript","description":"Demonstrates how to use the `useTracking` hook to declare component-level tracking data, imperatively dispatch events with `trackEvent`, access contextual data with `getTrackingData`, and use the `<Track>` component to propagate context to child components. It also shows options like `dispatchOnMount` and `mergeOptions`.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}