React SDK

import { createClient, Environment } from '@kameleoon/react-sdk';

// -- Optional configuration
const configuration = {
  dataFileRefreshInterval: 60,
  environment: Environment.Production,
  cookieDomain: '.example.com',
};

const client = createClient({ siteCode: 'my_site_code', configuration });

import {
  createClient,
  Environment,
  KameleoonProvider,
} from '@kameleoon/react-sdk';

const client = createClient({
  siteCode: 'my_site_code',
  configuration: {
    dataFileRefreshInterval: 60,
    environment: Environment.Production,
  },
});

function AppWrapper() {
  return (
    <KameleoonProvider client={client}>
      <App />
    </KameleoonProvider>
  );
}

import {
  createClient,
  Environment,
  KameleoonProviderSSR,
} from '@kameleoon/react-sdk';

function AppWrapper(): JSX.Element {
  return (
    <KameleoonProviderSSR sdkParameters={{
      siteCode: 'my_site_code',
      configuration: {
        dataFileRefreshInterval: 60,
        environment: Environment.Production,
      }
    }}>
      <App />
    </KameleoonProviderSSR>
  );
}

import {
  createClient,
  Environment,
  KameleoonProviderSSR,
} from '@kameleoon/react-sdk';

function AppWrapper() {
  return (
    <KameleoonProviderSSR sdkParameters={{
      siteCode: 'my_site_code',
      configuration: {
        dataFileRefreshInterval: 60,
        environment: Environment.Production,
      }
    }}>
      <App />
    </KameleoonProviderSSR>
  );
}

import {
  createClient,
  Environment,
  KameleoonProvider,
} from '@kameleoon/react-sdk';

// Checks if the code is running on the server (Node.js) and not in the browser.
// This can be replaced with any other mechanism you use to detect server-side execution.
const isServer = typeof window === 'undefined';

const client = createClient({
  siteCode: 'my_site_code',
  configuration: {
    dataFileRefreshInterval: 60,
    environment: Environment.Production,
  },
  externals: {
    // Add your external dependencies here, e.g. storage, eventSource, visitorCodeManager, etc.
  },
  stubMode: isServer,
});

function AppWrapper(): JSX.Element {
  return (
    <KameleoonProvider client={client}>
      <App />
    </KameleoonProvider>
  );
}

import {
  createClient,
  Environment,
  KameleoonProvider,
} from '@kameleoon/react-sdk';

// Checks if the code is running on the server (Node.js) and not in the browser.
// This can be replaced with any other mechanism you use to detect server-side execution.
const isServer = typeof window === 'undefined';

const client = createClient({
  siteCode: 'my_site_code',
  configuration: {
    dataFileRefreshInterval: 60,
    environment: Environment.Production,
  },
  externals: {
    // Add your external dependencies here, e.g. storage, eventSource, visitorCodeManager, etc.
  },
  stubMode: isServer,
});

function AppWrapper() {
  return (
    <KameleoonProvider client={client}>
      <App />
    </KameleoonProvider>
  );
}

import { useEffect, useCallback } from 'react';
import { useInitialize } from '@kameleoon/react-sdk';

function MyComponent() {
  const { initialize } = useInitialize();

  // -- Waiting for the client initialization using `async/await`

  const init = useCallback(async () => {
    await initialize();
  }, [initialize]);

  useEffect(() => {
    init();
  }, [init]);
}

import { createClient } from '@kameleoon/react-sdk';
import { KameleoonEventSource } from '@kameleoon/react-native-event-source';
import { KameleoonStorage } from '@kameleoon/react-native-storage';
import { KameleoonVisitorCodeManager } from '@kameleoon/react-native-visitor-code-manager';
import { KameleoonSecurePRNG } from '@kameleoon/react-native-secure-prng';
import { KameleoonPlatformAnalyzer } from '@kameleoon/react-native-platform-analyzer';

// --- Create KameleoonClient ---
const client = createClient({
  siteCode: 'my_site_code',
  externals: {
    storage: new KameleoonStorage(),
    eventSource: new KameleoonEventSource(),
    visitorCodeManager: new KameleoonVisitorCodeManager(),
    platformAnalyzer: new KameleoonPlatformAnalyzer(),
    // -- Optional --
    prng: new KameleoonSecurePRNG(),
  },
});

import { KameleoonClient, KameleoonLogger, LogLevel } from ‘@kameleoon/react-sdk’;

const client = createClient({ siteCode: ‘my_site_code’, configuration });

// The `NONE` log level allows no logging.
client.setLogLevel(LogLevel.NONE);
// Or use KameleoonLogger
KameleoonLogger.setLogLevel(LogLevel.NONE);


// The `ERROR` log level only allows logging issues that may affect the SDK’s main behaviour.
client.setLogLevel(LogLevel.ERROR);
// Or use KameleoonLogger
KameleoonLogger.setLogLevel(LogLevel.ERROR);

// The `WARNING` log level allows logging issues which may require additional attention.
// It extends the `ERROR` log level.
// The `WARNING` log level is a default log level.
client.setLogLevel(LogLevel.WARNING);
// Or use KameleoonLogger
KameleoonLogger.setLogLevel(LogLevel.WARNING);

import { KameleoonClient, KameleoonLogger, LogLevel } from ‘@kameleoon/react-sdk/full’;

// The `INFO` log level allows logging general information on the SDK’s internal processes.
// It extends the `WARNING` log level.
client.setLogLevel(LogLevel.INFO);
// Or use KameleoonLogger
KameleoonLogger.setLogLevel(LogLevel.INFO);

// The `DEBUG` level logs additional details about the SDK’s internal processes and extends the `INFO` level
// with more granular. diagnostic output.
// This information is not intended for end-user interpretation but can be sent to our support team
// to assist with internal troubleshooting.
client.setLogLevel(LogLevel.DEBUG);
// Or use KameleoonLogger
KameleoonLogger.setLogLevel(LogLevel.DEBUG);

import { KameleoonClient, KameleoonLogger, LogLevel } from '@kameleoon/react-sdk';

export class CustomLogger {
  // `log` method accepts logs from the SDK
  log(level, message) {
    // Custom log handling logic here. For example:
    switch (level) {
      case 'DEBUG':
        console.debug(message);
        break;
      case 'INFO':
        console.info(message);
        break;
      case 'WARNING':
        console.warn(message);
        break;
      case 'ERROR':
        console.error(message);
        break;
    }
  }
}

const client = createClient({
  siteCode: 'my_site_code',
  externals: {
    logger: new CustomLogger(),
  },
});

// Log level filtering is applied separately from log handling logic.
// The custom logger will only accept logs that meet or exceed the specified log level.
// Ensure the log level is set correctly.
client.setLogLevel(LogLevel.DEBUG);
// Or use KameleoonLogger
KameleoonLogger.setLogLevel(LogLevel.DEBUG);

import { KameleoonClient } from '@kameleoon/react-sdk';

// --- External Storage implementation ---
// - JavaScript `Map` is used as an example storage
const storage = new Map();

class MyStorage {
  read(key) {
    // - Read data using `key`
    const data = storage.get(key);

    // - Return `null` if there's no data
    if (!data) {
      return null;
    }

    // - Return obtained data
    return data;
  }

  write(key, data) {
    // - Write data using `key`
    storage.set(key, data);
  }
}

// --- Create KameleoonClient ---
const client = createClient({
  siteCode: 'my_site_code',
  externals: {
    storage: new MyStorage(),
  },
});

// --- External EventSource implementation ---
// - Example uses native browser `EventSource`
class MyEventSource {
  eventSource;

  open({ eventType, onEvent, url }) {
    // - Initialize `EventSource`
    const eventSource = new EventSource(url);

    this.eventSource = eventSource;
    // - Add event listener with provided event type and event callback
    this.eventSource.addEventListener(eventType, onEvent);
  }

  close() {
    // - Cleanup open event source
    if (this.eventSource) {
      this.eventSource.close();
    }
  }

  public onError(callback) {
    // - Set error callback
    if (this.eventSource) {
      this.eventSource.onerror = callback;
    }
  }
}

// --- Create KameleoonClient ---
const client = createClient({
  siteCode: 'my_site_code',
  externals: {
    eventSource: new MyEventSource(),
  },
});

import { KameleoonUtils } from '@kameleoon/react-sdk';

// --- External Visitor Code Manager implementation ---
// - Example uses browser `document.cookie` API
class MyVisitorCodeManager {
  getData(key) {
    const cookieString = document.cookie;

    // - Return `null` if no cookie was found
    if (!cookieString) {
      return null;
    }

    // - Parse cookie using provided `key`
    return KameleoonUtils.getCookieValue(cookieString, key);
  }

  setData({ visitorCode, domain, maxAge, key, path }) {
    // - Set cookie with provided parameters
    let resultCookie = `${key}=${visitorCode}; Max-Age=${maxAge}; Path=${path}`;

    if (domain) {
      resultCookie += `; Domain=${domain}`;
    }

    document.cookie = resultCookie;
  }
}

// --- Create KameleoonClient ---
const client = createClient({
  siteCode: 'my_site_code',
  externals: {
    visitorCodeManager: new MyVisitorCodeManager(),
  },
});

import { KameleoonClient } from '@kameleoon/react-sdk';

// --- External Requester Implementation
export class MyRequester {
  async sendRequest({ url, parameters }) {
    // - Using native browser `fetch`
    return await fetch(url, parameters);
  }
}

// --- Create KameleoonClient ---
const client = new KameleoonClient({
  siteCode: 'my_site_code',
  externals: {
    requester: new MyRequester(),
  },
});

// --- External Pseudo Random Number Generator (PRNG) implementation ---
class MyPRNG {
  getRandomNumber() {
    // Return a random floating point number between `0` und `1`, like `Math.random()` does.
    return Math.random();
  }
}

// --- Create KameleoonClient ---
const client = createClient({
  siteCode: 'my_site_code',
  externals: {
    prng: new MyPRNG(),
  },
});

import { useEffect, useCallback } from 'react';
import {
  useInitialize,
  useVisitorCode,
  useData,
  CustomData,
  KameleoonException,
} from '@kameleoon/react-sdk';

function MyComponent() {
  const { initialize } = useInitialize();
  const { getVisitorCode } = useVisitorCode();
  const { addData } = useData();

  const init = useCallback(async () => {
    try {
      await initialize();

      // -- Get visitor code
      const visitorCode = getVisitorCode();

      const customData = new CustomData(0, 'my_data');
      addData(visitorCode, customData);
    } catch (error) {
      switch (error.type) {
        case KameleoonException.VisitorCodeMaxLength:
          // -- Handle an error
          break;
        case KameleoonException.StorageWrite:
          // -- Handle an error
          break;
        case KameleoonException.Initialization:
          // -- Handle an error
          break;
        default:
          break;
      }
    }
  }, [initialize, addData, visitorCode, getVisitorCode]);

  useEffect(() => {
    init();
  }, [init]);
}

import { KameleoonUtils } from '@kameleoon/react-sdk';

// - Example of `Requester` with disabled tracking
class Requester {
  async sendRequest({ url, parameters, requestType }) {
    if (requestType === RequestType.Tracking) {
      return KameleoonUtils.simulateSuccessRequest(requestType, null);
    }

    return await fetch(url, parameters);
  }
}

import { KameleoonUtils } from '@kameleoon/react-sdk';

const cookies = 'key_1=value_1; key_2=value_2';
const key = 'key_1';

const value = KameleoonUtils.getCookieValue(cookies, key); // = `value_1`