Provider

MentiqAnalyticsProvider

The MentiqAnalyticsProvider is a React context provider that initializes and provides analytics functionality throughout your application. It features dynamic loading, server-side rendering support, and graceful error handling.

Features

Server-side rendering (SSR) support
Code splitting and lazy loading
Better bundle optimization
Graceful error handling
Loading and fallback states

Props

AnalyticsConfig

required

Configuration object for the analytics instance

{
  apiKey: string;
  endpoint?: string;
  debug?: boolean;
  batchSize?: number;
  flushInterval?: number;
}

ReactNode

required

Child components that will have access to analytics

ReactNode

Component to render if analytics fails to load (defaults to children)

ReactNode

Component to display while analytics is loading (defaults to children)

Basic Usage

App.tsx
Next.js

import { MentiqAnalyticsProvider } from 'mentiq-sdk';

function App() {
  return (
    <MentiqAnalyticsProvider
      config={{
        apiKey: 'your-api-key',
        endpoint: 'https://api.mentiq.com',
        debug: true,
      }}
    >
      <YourApp />
    </MentiqAnalyticsProvider>
  );
}

// app/layout.tsx
import { MentiqAnalyticsProvider } from 'mentiq-sdk';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <MentiqAnalyticsProvider
          config={{
            apiKey: process.env.NEXT_PUBLIC_MENTIQ_API_KEY!,
          }}
        >
          {children}
        </MentiqAnalyticsProvider>
      </body>
    </html>
  );
}

With Loading State

import { MentiqAnalyticsProvider } from 'mentiq-sdk';

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

withMentiqAnalytics

Higher-Order Component (HOC) for wrapping components with MentiQ analytics.

Signature

function withMentiqAnalytics<P extends object>(
  WrappedComponent: ComponentType<P>,
  config: AnalyticsConfig
): ComponentType<P>

Usage

import { withMentiqAnalytics } from 'mentiq-sdk';

function MyComponent() {
  return <div>My Component</div>;
}

export default withMentiqAnalytics(MyComponent, {
  apiKey: 'your-api-key',
});

useLazyMentiqAnalytics

Hook for lazy loading analytics on demand, useful for conditional analytics loading.

Returns

AnalyticsInstance | null

The analytics instance once loaded

() => Promise<void>

Function to trigger analytics loading

boolean

Whether analytics is currently loading

Error | null

Any error that occurred during loading

Usage

import { useLazyMentiqAnalytics } from 'mentiq-sdk';

function ConsentBanner() {
  const { analytics, loadAnalytics, isLoading } = useLazyMentiqAnalytics({
    apiKey: 'your-api-key',
  });

  const handleAcceptCookies = async () => {
    await loadAnalytics();
    analytics?.track('cookies_accepted');
  };

  return (
    <div>
      <button onClick={handleAcceptCookies} disabled={isLoading}>
        {isLoading ? 'Loading...' : 'Accept Cookies'}
      </button>
    </div>
  );
}

The provider automatically cleans up analytics instances on unmount to prevent memory leaks.

Server-Side Rendering

The provider automatically detects server-side environments and renders children without initializing analytics, ensuring compatibility with Next.js, Remix, and other SSR frameworks.

// Works seamlessly with SSR - no additional configuration needed
<MentiqAnalyticsProvider config={{ apiKey: 'your-api-key' }}>
  <App />
</MentiqAnalyticsProvider>

Analytics will only be loaded and tracked on the client side. Server-side renders will pass through without analytics functionality.

Get Started

Core Concepts

React Integration

Features

Guides

Examples

MentiqAnalyticsProvider

Features

Props

Basic Usage

With Loading State

withMentiqAnalytics

Signature

Usage

useLazyMentiqAnalytics

Returns

Usage

Server-Side Rendering

​MentiqAnalyticsProvider

​Features

​Props

​Basic Usage

​With Loading State

​withMentiqAnalytics

​Signature

​Usage

​useLazyMentiqAnalytics

​Returns

​Usage

​Server-Side Rendering

MentiqAnalyticsProvider

Features

Props

Basic Usage

With Loading State

withMentiqAnalytics

Signature

Usage

useLazyMentiqAnalytics

Returns

Usage

Server-Side Rendering