Kameleoon React SDK

Introduction

Kameleoon React SDK is used to work with Kameleoon Feature Flags and Experiments using native JavaScript or specific React Native APIs.
The package provides a number of hooks and wrappers that can grant React oriented support for Kameleoon SDK when using it in React or React Native applications.

This page describes the most basic configuration, for more in-depth review of all the hooks and configuration options follow Official Kameleoon Documentation

Contents

- Installation
- Configuration
- Usage Example

Installation

- npm - npm install @kameleoon/react-sdk
- yarn - yarn add @kameleoon/react-sdk
- pnpm - pnpm add @kameleoon/react-sdk
- bun - bun install @kameleoon/react-sdk

Configuration

1. Obtain your site code from Kameleoon Platform
2. Instantiate SDK client and pass it to KameleoonProvider

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

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

function MyComponentWrapper(): JSX.Element {
return (



);
}
`

If used in Next.js for server-side rendering, you can set stubMode to disable SDK client initialization on the server.

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

const isServer = typeof window === 'undefined';

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

function MyComponentWrapper(): JSX.Element {
return (



);
}
`

Usage Example

`tsx
import { useEffect } from 'react';
import {
useData,
CustomData,
useInitialize,
useVisitorCode,
useFeatureFlag,
} from '@kameleoon/react-sdk';

function MyComponent(): JSX.Element {
const { initialize } = useInitialize();
const { addData } = useData();
const { isFeatureFlagActive } = useFeatureFlag();
const { getVisitorCode } = useVisitorCode();

async function init(): Promise {
// -- Wait for the client initialization
await initialize();

// -- Generate a visitor code
const visitorCode = getVisitorCode();

// -- Add targeting data
const customDataIndex = 0;
addData(visitorCode, new CustomData(customDataIndex, 'my_data'));

// -- Check if the feature is active for visitor
const isActive = isFeatureFlagActive(visitorCode, 'my_feature_key');
}

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