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
Configuration object for the analytics instance{
apiKey: string;
endpoint?: string;
debug?: boolean;
batchSize?: number;
flushInterval?: number;
}
Child components that will have access to analytics
Component to render if analytics fails to load (defaults to children)
Component to display while analytics is loading (defaults to children)
Basic Usage
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
The analytics instance once loaded
Function to trigger analytics loading
Whether analytics is currently loading
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.