React Configuration

The Journium React SDK wraps the core JavaScript SDK and provides React-specific components and hooks.

React-Specific Setup

Provider Configuration

Wrap your app with <JourniumProvider> to initialize Journium:

import React from 'react';
import { JourniumProvider } from '@journium/react';
import App from './App';

function Root() {
  return (
    <JourniumProvider
      config={{
        publishableKey: import.meta.env.VITE_JOURNIUM_PUBLISHABLE_KEY!,
        options: {
          debug: import.meta.env.VITE_JOURNIUM_DEBUG === 'true',
          autoTrackPageviews: true,
          autocapture: true
        }
      }}
    >
      <App />
    </JourniumProvider>
  );
}

export default Root;

import React from 'react';
import ReactDOM from 'react-dom/client';
import { JourniumProvider } from '@journium/react';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root')!);

root.render(
  <JourniumProvider
    config={{
      publishableKey: process.env.REACT_APP_JOURNIUM_PUBLISHABLE_KEY!,
      options: {
        debug: process.env.NODE_ENV === 'development',
        autoTrackPageviews: true,
        autocapture: true
      }
    }}
  >
    <App />
  </JourniumProvider>
);

Configuration Options

The config prop accepts a JourniumConfig object with the following properties:

• publishableKey (required): Your Journium publishable key
• apiHost (optional): Custom API endpoint
• options (optional): Configuration options object

For detailed information about all available configuration options, see the JavaScript SDK Configuration Guide.

Common options:

• debug - Enable debug logging
• flushAt - Number of events before auto-flush
• flushInterval - Flush interval in milliseconds
• sessionTimeout - Session timeout duration
• autoTrackPageviews - Automatically track page views
• autocapture - Configure automatic event capture

React Components

<JourniumProvider>

Provider component that initializes Journium analytics throughout your React application.

Props:

Example:

<JourniumProvider config={{ publishableKey: 'pk_...' }}>
  <App />
</JourniumProvider>

React Hooks

The SDK provides React hooks for tracking events and managing user identity. See the Hooks documentation for detailed information:

• useTrackEvent() - Track custom events
• useIdentify() - Identify users
• useReset() - Reset user identity
• useTrackPageview() - Manual pageview tracking
• useAutoTrackPageview() - Automatic pageview tracking
• useAutocapture() - Control autocapture
• useJournium() - Access analytics instance

Context API

Access the Journium context for advanced use cases:

import { useJournium } from '@journium/react';

function MyComponent() {
  const { analytics, config, effectiveOptions } = useJournium();
  
  // Access analytics instance directly
  const options = analytics?.getEffectiveOptions();
  
  return <div>Debug: {effectiveOptions?.debug ? 'On' : 'Off'}</div>;
}

Context Value:

interface JourniumContextValue {
  analytics: JourniumAnalytics | null;
  config: JourniumConfig | null;
  effectiveOptions: JourniumLocalOptions | null;
}

TypeScript Support

The React SDK is fully typed. For complete type definitions, see the JavaScript SDK TypeScript Types documentation.

All types are exported from @journium/react:

import { 
  type JourniumConfig, 
  type JourniumLocalOptions,
  type AutocaptureOptions 
} from '@journium/react';

API Reference

For detailed API method reference (track, identify, reset, etc.), see the JavaScript SDK API Methods.

The React hooks provide a convenient wrapper around these methods:

Next Steps