Skip to main content

​
Overview

The MentiqAnalyticsProvider is the root component that wraps your application to enable analytics tracking. It features dynamic loading for optimal performance, server-side rendering support, and graceful error handling.

​
Props

​
config
AnalyticsConfig
required
Configuration object for the analytics instance. Contains your API key and tracking settings.
​
children
ReactNode
required
Your application components that will have access to analytics functionality.
​
fallback
ReactNode
Component to render if analytics fails to load. Defaults to rendering children without analytics.
​
loading
ReactNode
Component to display while analytics is loading. Defaults to null.

​
Usage

import { MentiqAnalyticsProvider } from 'mentiq-sdk';

function App() {
  return (
    <MentiqAnalyticsProvider
      config={{
        apiKey: 'your-api-key',
        trackPageViews: true,
        trackErrors: true
      }}
      loading={<div>Loading analytics...</div>}
      fallback={<div>Analytics unavailable</div>}
    >
      <YourApp />
    </MentiqAnalyticsProvider>
  );
}

​
Features

  • Server-side rendering support - Automatically detects server environment and renders without analytics
  • Code splitting - Analytics code is dynamically imported for better bundle optimization
  • Lazy loading - Loads only on the client side when needed
  • Error handling - Gracefully falls back to rendering children if analytics fails
  • Loading states - Supports custom loading and fallback components

​
Behavior

​
Server-side

On the server, the provider returns children immediately without loading analytics.

​
Client-side

  1. Shows loading state (if provided)
  2. Dynamically imports analytics module
  3. Initializes analytics instance
  4. Provides analytics context to children
  5. On error, shows fallback component

Build docs developers (and LLMs) love

Get started for freeTalk to us