@kameleoon/react-sdk 5.0.0 → 6.1.0

package/README.md

@@ -1,1499 +1,105 @@
-# Kameleoon React SDK
+# Kameleoon React/React Native SDK
 
-### Introduction
-This repository is a Kameleoon React SDK which is used to run experiments and get feature flag status and its variables. Integration of this SDK into web application is easy, and its footprint is low.
+## Introduction
 
-### Requirements
-This React SDK requires `React 16.8.0+`
+Kameleoon React/React Native SDK is used to work with Kameleoon Feature Flags and Experiments.
+Integration of this SDK on web/mobile is easy, and its footprint is low.
 
-### Installation
-Installing the React SDK can be directly achieved through an `npm` or `yarn` module:
+This page describes the most basic configuration, for more in-depth review of all the hooks and configuration options follow [Official Kameleoon Documentation](https://developers.kameleoon.com/react-js-sdk.html)
 
-**npm**
-```
-npm install @kameleoon/react-sdk
-```
-
-**yarn**
-```
-yarn add @kameleoon/react-sdk
-```
-
-### Usage
-
-## `createClient`
-A `KameleoonClient` created using `createClient()` to run experiments and retrive the status of feature flag and its variables.
-
-#### Arguments
-- `clientParams: ICreateClientParams`
-  - `siteCode: string` - code of the website on which experiments run. This unique code id can be found in our platform.
-  - `visitorCode: string` (optional) - visitor code is an optional parameter, if it is used, it automatically create custom data to check if visitor is targeted.
-  - `option: SDKConfiguration` (optional) - JSON object filled with configuration parameters.
-    - `actions_configuration_refresh_interval: number` (optional) - an option specifying the refresh interval, in minutes, of the configuration for experiments and feature flags (the active experiments and feature flags are fetched from the Kameleoon servers). It means that once you launch an experiment, pause it, or stop it the changes can take (at most) the duration of this interval to be propagated in production to your servers. If not specified, the **default interval is 60 minutes**.
-    - `visitor_data_maximum_size: number` (optional) - an option specifying the maximum amount of memory that [the map holding all the visitor data](https://developers.kameleoon.com/javascript-sdk.html#technical-considerations) (in particular custom data) can take (in MB on the browser LocalStorage). If specified, **max size is 5MB**. If not specified, the **default size is 1MB**.
-    - `environment: string` (optional) - an option specifying which feature flag configuration will be used, by default each feature flag is split into **production**, **staging**, **development**. If not specified, will be set to **default value** of **production**.
-
-    **NOTICE:** make sure not to use several client instances in one application with different `environment` as it is not fully supported yet and might lead to local storage configuration being overwritten and cause bugs.
-
-#### Returns
-- A `KameleoonClient` instance.
-
-#### Example
-```jsx
-import { createClient } from '@kameleoon/react-sdk';
-
-const client = createClient({
-  siteCode: 'dfl102d38e',
-  visitorCode: '280295',
-  options: {
-    visitor_data_maximum_size: 1,
-    actions_configuration_refresh_interval: 60,
-    environment: 'staging'
-  }
-});
-```
-
-## `<KameleoonProvider>`
-Use this provider in root level by wrapping your app to gain an access to `KameleoonClient`. This ensures your app does not flicker due to flag changes at startup time.
-
-#### Props
-- `children: ReactNode` - child elements of the provider.
-- `client: KameleoonClient` - `KameleoonClient` instance created by `createClient()`.
-
-#### Example
-```jsx
-import { KameleoonProvider, createClient } from '@kameleoon/react-sdk';
-
-const client = createClient({
-  siteCode: 'dfl102d38e'
-  visitorCode: '280295',
-  options: {
-    visitor_data_maximum_size: 1,
-    actions_configuration_refresh_interval: 60,
-    environment: 'staging'
-  }
-});
-
-function AppWrapper(): JSX.Element {
-  return (
-    <KameleoonProvider client={client}>
-      <App />
-    </KameleoonProvider>
-  )
-}
-```
-
-## Kameleoon client
-These Hook and HOC validate whether they are used within `KameleoonProvider` and provide an access to `KameleoonClient`.
-
-### `useKameleoon`
-#### Returns
-- Returns `object: KameleoonHookResult`:
-  - `client: KameleoonClient` - an instance of `KameleoonClient` taken from context.
-
-#### Example
-```jsx
-import { useKameleoon } from '@kameleoon/react-sdk';
-
-function MyComponent(): JSX.Element {
-  const { client } = useKameleoon();
-
-  ...
-}
-```
-
-### `withKameleoon`
-#### Returns
-- `Component: React.Component` - component which will be enhanced with the prop `client: KameleoonClient`.
-
-```jsx
-import { withKameleoon } from '@kameleoon/react-sdk';
-
-class MyComponent extends React.Component {
-  componentDidMount() {
-    const { client } = this.props;
-  }
-
-  ...
-}
-
-export default withKameleoon(MyComponent);
-```
-
-## LocalStorage Key
-- `KAMELEOON_SDK_LOCAL_STORAGE_KEY` - is a constant which used as a key in `LocalStorage` to store a `kameleoonTargetingData` and `kameleoonConfiguration`.
-
-```jsx
-import { KAMELEOON_SDK_LOCAL_STORAGE_KEY } from '@kameleoon/react-sdk'
-```
-
-## Obtain status and variables of feature flag
-Returns the status of a feature flag and its variables.
-
-#### Arguments
-- `featureParams: IFeatureParams`
-  - `featureKey: string | number` - unique identifier or key of the feature you want to expose to a user.
-  - `variableKeys: VariableKeysType` - keys for the variables on different environments.
-  - `visitorCode: string` (optional) - unique identifier of the user.
-
-#### Returns
-- `errors: KameleoonException[]` - an array of errors thrown as a result of getting variables or feature flag status.
-- `feature` -  an object containing feature flag status and variables
-  - `isActive: boolean` - feature flag status.
-  - `variables: FeatureVariableType[]` - feature flag variables.
-
-#### Exceptions
-- `KameleoonException.NotTargeted` - Exception indicating that the current visitor / user did not trigger the required targeting conditions for this feature. The targeting conditions are defined via Kameleoon's segment builder.
-- `KameleoonException.FeatureConfigurationNotFound` - Exception indicating that the requested feature ID has not been found in the internal configuration of the SDK. This is usually normal and means that the feature flag has not yet been activated on Kameleoon's side (but code implementing the feature is already deployed on the web-application's side).
-
-
-In this examples, if the feature flag with the `red-button` key is enabled, theme of button will set to red.
-### `useFeature`
-#### Example
-```jsx
-import { Button } from '@kameleoon/ui';
-import { useFeature, useVisitorCode, KameleoonException } from '@kameleoon/react-sdk';
-
-function MyComponent(): JSX.Element {
-  const { getVisitorCode } = useVisitorCode();
-  const { feature, errors } = useFeature({
-    featureKey: 'red-button',
-    variableKeys: { production: 'red-button' },
-    visitorCode: getVisitorCode('example.com'),
-  });
-
-  for (const error of errors) {
-    if (error.type === KameleoonException.NotTargeted) {
-      // Handle error
-    }
-
-    if (error.type === KameleoonException.FeatureConfigurationNotFound) {
-      // Handle error
-    }
-  }
-
-  const { isActive, variables } = feature;
-
-  return <Button theme={isActive ? 'red' : 'green'} />;
-}
-```
-
-### `withFeature`
-#### Example
-```jsx
-import { Button } from '@kameleoon/ui';
-import { withFeature, KameleoonException } from '@kameleoon/react-sdk';
-
-class MyComponent extends React.Component {
-  state = { 
-    isActive: false,
-    variables: [],
-  }
-
-  componentDidMount() {
-    const { feature, errors } = this.props;
-
-    for (const error of errors) {
-      if (error.type === KameleoonException.NotTargeted) {
-        // Handle error
-      }
-
-      if (error.type === KameleoonException.FeatureConfigurationNotFound) {
-        // Handle error
-      }
-    }
-
-    const { isActive, variables } = feature;
-
-    this.setState({ isActive, variables });
-  }
-
-  render() {
-    return <Button theme={this.isActive ? 'red' : 'green'} />;
-  }
-}
-
-export default withFeature({
-  featureKey: 'red-button',
-  variableKeys: { production: 'red-button' },
-  visitorCode: '280295'
-})(MyComponent);
-```
-
-### `Feature` render props
-#### Props
-- `children: (featureResult: IFeature) => ReactNode` - child elements of `Feature`.
-- `featureKey: string | number` - unique identifier or key of the feature you want to expose to a user.
-- `variableKeys: VariableKeysType` - keys for the variables on different environments.
-- `visitorCode: string` - unique identifier of the user.
-
-#### Returns
-A wrapped component with the following props:
-- `errors: KameleoonException[]` - an array of errors thrown as a result of getting variables or feature flag status.
-- `feature` -  an object containing feature flag status and variables
-  - `isActive: boolean` - feature flag status.
-  - `variables: FeatureVariableType[]` - feature flag variables.
-
-#### Example
-```jsx
-import { Button } from '@kameleoon/ui';
-import { Feature } from '@kameleoon/react-sdk';
-
-class MyComponent extends React.Component {
-  state = { 
-    isActive: false,
-    variables: [],
-  }
-
-  componentDidMount() {
-    const { feature, errors } = this.props;
-
-    for (const error of errors) {
-      if (error.type === KameleoonException.NotTargeted) {
-        // Handle error
-      }
-
-      if (error.type === KameleoonException.FeatureConfigurationNotFound) {
-        // Handle error
-      }
-    }
-
-    const { isActive, variables } = feature;
-
-    this.setState({ isActive, variables });
-  }
-
-  render() {
-    return <Button theme={this.isActive ? 'red' : 'green'} />;
-  }
-}
-
-class MyComponentWrapper extends React.Component { 
-  render() {
-    return(
-      <Feature 
-        featureKey="red-button" 
-        variableKeys={{production: "red-button"}} 
-        visitorCode="280295"
-      >
-        (({ feature, errors }) => (
-          <MyComponent feature={feature} errors={errors} />
-        ))
-      </Feature>;
-    )
-  }
-}
-```
-
-## Obtain visitorCode
-A callback function `getVisitorCode()` retrieves the Kameleoon `visitorCode` for the current visitor. This is especially important when using Kameleoon in a mixed front-end and back-end environment, where user identification consistency must be guaranteed. The implementation logic is described here:
-
-1. First we check if a `kameleoonVisitorCode` cookie can be found. If so, we will use this as the visitor identifier.
-
-2. If no cookie is found, we either randomly generate a new identifier, or use the `defaultVisitorCode` argument as identifier if it is passed. This allows our customers to use their own identifiers as visitor codes, should they wish to. This can have the added benefit of matching Kameleoon visitors with their own users without any additional look-ups in a matching table.
-
-3. In any case, the JavaScript `kameleoonVisitorCode` cookie is set with the value. Then this identifier value is finally returned by the method.
-
-For more information, refer to [this article](https://developers.kameleoon.com/back-front-bridge.html).
-
-There is also an alternative `getAsyncVisitorCode()` callback, which is asynchronous and is meant for *ReactNative* applications.
-
-##### Please Note:
-_If you provide your own `visitorCode`, its uniqueness must be guaranteed on your end - the SDK cannot check it. Also note that the length of `visitorCode` is **limited to 255 characters**. Any excess characters will throw an exception._
-
-#### `getVisitorCode()`
-
-##### Arguments
-- `topLevelDomain: string` - current top level domain for the concerned site (this information is needed to set the corresponding cookie accordingly, on the top level domain).
-- `defaultVisitorCode: string` (optional) - This parameter will be used as the `visitorCode` if no existing `kameleoonVisitorCode` cookie is found on the request. This field is optional, and by default a random `visitorCode` will be generated.
-
-##### Returns
-- `visitorCode: string` - a visitorCode that will be associated with this particular user and should be used with most of the methods of the SDK.
-
-### `useVisitorCode`
-#### Returns
-- A callback function `getVisitorCode()`.
-
-#### Example
-```jsx
-import { useEffect } from 'react';
-import { uuidv4 } from 'uuid';
-import { useVisitorCode } from '@kameleoon/react-sdk';
-
-function MyComponent(): JSX.Element {
-  const { getVisitorCode } = useVisitorCode();
-
-  useEffect(() => {
-    // Without defaultVisitorCode argument
-    const visitorCode = getVisitorCode('example.com');
-
-    // With defaultVisitorCode argument
-    const visitorCode = getVisitorCode('example.com', uuidv4());
-  }, []);
-
-  ...
-}
-```
-### `withVisitorCode`
-#### Arguments
-- `Component: React.Component` - component which will be enhanced with the prop `getVisitorCode()`.
-
-#### Returns
-- A wrapped component with additional props as described above.
-
-#### Example
-```jsx
-import { uuidv4 } from 'uuid';
-import { withVisitorCode } from '@kameleoon/react-sdk';
-
-class MyComponent extends React.Component {
-  componentDidMount() {
-    const { getVisitorCode } = this.props;
-
-    // Without defaultVisitorCode argument
-    const visitorCode = getVisitorCode('example.com');
-
-    // With defaultVisitorCode argument
-    const visitorCode = getVisitorCode('example.com', uuidv4());
-  }
-
-  ...
-}
-
-export default withVisitorCode(MyComponent);
-```
-
-### `useAsyncVisitorCode`
-#### Returns
-- A callback function `getAsyncVisitorCode()`.
-
-#### Example
-```jsx
-import { useState } from 'react';
-import { uuidv4 } from 'uuid';
-import { useAsyncVisitorCode } from '@kameleoon/react-sdk';
-
-function MyComponent(): JSX.Element {
-  const { getAsyncVisitorCode } = useAsyncVisitorCode();
-  const [visitorCode, setVisitorCode] = useState<string>('');
-
-  async function retrieveVisitorCode(): Promise<void> {
-    // Without defaultVisitorCode argument
-    const result = await getAsyncVisitorCode('example.com');
-    // With defaultVisitorCode argument
-    const result = await getAsyncVisitorCode('example.com', uuidv4());
-
-    setVisitorCode(result);
-  }
-  ...
-}
-```
-### `withAsyncVisitorCode`
-#### Arguments
-- `Component: React.Component` - component which will be enhanced with the prop `getAsyncVisitorCode()`.
-
-#### Returns
-- A wrapped component with additional props as described above.
-
-#### Example
-```jsx
-import { uuidv4 } from 'uuid';
-import { withAsyncVisitorCode } from '@kameleoon/react-sdk';
-
-class MyComponent extends React.Component {
-  async componentDidMount(): Promise<void> {
-    const { getAsyncVisitorCode } = this.props;
-
-    // Without defaultVisitorCode argument
-    const visitorCode = await getAsyncVisitorCode('example.com');
-
-    // With defaultVisitorCode argument
-    const visitorCode = await getAsyncVisitorCode('example.com', uuidv4());
-  }
-
-  ...
-}
-
-export default withVisitorCode(MyComponent);
-```
-
-## Triggering an experiment
-A callback function `getVariationId()` takes `visitorCode` and `experimentId` as mandatory arguments to register a variation for a given user.
-
-If such a user has never been associated with any variation, the SDK returns a randomly selected variation. If a user with a given `visitorCode` is already registered with a variation, it will detect the previously registered variation and return the `variationId`.
-
-You have to make sure that proper error handling is set up in your code as shown in the example to the right to catch potential exceptions.
-
-##### Please Note:
-_By convention, the reference (original variation) always has an ID equal to **0**._
-
-#### Exceptions
-- `KameleoonException.NotTargeted` - Exception indicating that the current visitor / user did not trigger the required targeting conditions for this experiment. The targeting conditions are defined via Kameleoon's segment builder.
-- `KameleoonException.NotActivated` - Exception indicating that the current visitor / user triggered the experiment (met the targeting conditions), but did not activate it. The most common reason for that is that part of the traffic has been excluded from the experiment and should not be tracked.
-- `KameleoonException.ExperimentConfigurationNotFound` - Exception indicating that the requested experiment ID has not been found in the internal configuration of the SDK. This is usually normal and means that the experiment has not yet been started on Kameleoon's side (but code triggering / implementing variations is already deployed on the web-application's side).
-
-#### `getVariationId()`
-##### Arguments
-- `visitorCode: string` - unique identifier of the user
-- `experimentId: number` - unique identifier of the experiment you want to expose to a user
-
-##### Returns
-- `variationId: number` - ID of the variation that is registered for a given visitorCode. By convention, the reference (original variation) always has an ID equal to **0**.
-
-### `useTriggerExperiment`
-#### Returns
-- A callback function `getVariationId()`.
-- An `error` object containing `name`, `type` and `message` strings, certain type of exception can be handled using `error.type` and `KameleoonException`. If there is no errors on the client `error` will be `null`. 
-
-#### Example
-```jsx
-import { useEffect } from 'react';
-import { useTriggerExperiment, useVisitorCode, KameleoonException } from '@kameleoon/react-sdk';
-
-function MyComponent(): JSX.Element {
-  const { getVariationId, error } = useTriggerExperiment();
-  const { getVisitorCode } = useVisitorCode();
-
-  useEffect(() => {
-    const visitorCode = getVisitorCode('example.com');
-    const experimentId = 12341;
-
-    if (error?.type === KameleoonException.ExperimentConfigurationNotFound) {
-      // Handle exception
-    }
-
-    if (error?.type === KameleoonException.NotTargeted) {
-      // Handle exception
-    }
-
-    if (error?.type === KameleoonException.NotActivated) {
-      // Handle exception
-    }
-
-    const variationId = getVariationId(visitorCode, experimentId);
-  }, []);
-
-  ...
-}
-```
-
-### `withTriggerExperiment`
-#### Arguments
-- `Component: React.Component` - component which will be enhanced with the prop `getVariationId()`.
-
-#### Returns
-- A wrapped component with additional props as described above.
-
-#### Example
-```jsx
-import { withVisitorCode, withTriggerExperiment, compose, KameleoonException } from '@kameleoon/react-sdk';
-
-class MyComponent extends React.Component {
-  componentDidMount() {
-    const { getVisitorCode, getVariationId, triggerExperimentError } = this.props;
-    const visitorCode = getVisitorCode('example.com');
-    const experimentId = 230243;
-
-    if (triggerExperimentError?.type === KameleoonException.ExperimentConfigurationNotFound) {
-      // Handle exception
-    }
-
-    if (triggerExperimentError?.type === KameleoonException.NotTargeted) {
-      // Handle exception
-    }
-
-    if (triggerExperimentError?.type === KameleoonException.NotActivated) {
-      // Handle exception
-    }
-
-    const variationId = getVariationId(visitorCode, experimentId);
-  }
-
-  ...
-}
-
-export default compose(withVisitorCode, withTriggerExperiment)(MyComponent);
-```
-
-## Activate feature
-A callback function `hasFeature()` which validates if user has been associated with this feature. If it is fails, callback returns value **false**, otherwise **true**.
-
-If feature flag is not activated, `KameleoonException.FeatureConfigurationNotFound` exception will be thrown. Please, make sure to handle the error properly.
-
-#### Exceptions
-- `KameleoonException.NotTargeted` - Exception indicating that the current visitor / user did not trigger the required targeting conditions for this feature. The targeting conditions are defined via Kameleoon's segment builder.
-- `KameleoonException.FeatureConfigurationNotFound` - Exception indicating that the requested feature ID has not been found in the internal configuration of the SDK. This is usually normal and means that the feature flag has not yet been activated on Kameleoon's side (but code implementing the feature is already deployed on the web-application's side).
-
-#### `hasFeature()`
-##### Arguments
-- `featureKey: string | number` - unique identifier or key of the feature you want to expose to a user.
-- `visitorCode: string` (optional) - unique identifier of the user.
-
-##### Returns
-- A `value: boolean` of the feature that is registered for a given `visitorCode`.
-
-### `useActivateFeature`
-#### Returns
-- A callback function `hasFeature()`.
-- An `error` object containing `name`, `type` and `message` strings, certain type of exception can be handled using `error.type` and `KameleoonException`. If there is no errors on the client `error` will be `null`. 
-
-#### Example
-```jsx
-import { useEffect } from 'react';
-import { useActivateFeature, useVisitorCode, KameleoonException } from '@kameleoon/react-sdk';
-
-function MyComponent(): JSX.Element {
-  const { hasFeature, error } = useActivateFeature();
-  const { getVisitorCode } = useVisitorCode();
-
-  useEffect(() => {
-    const visitorCode = getVisitorCode('example.com');
-    const featureKey = 'example-feature-key';
-
-    if (error?.type === KameleoonException.FeatureConfigurationNotFound) {
-      // Handle exception
-    }
-
-    if (error?.type === KameleoonException.NotTargeted) {
-      // Handle exception
-    }
-
-    const feature = hasFeature(featureKey, visitorCode);
-  }, []);
-
-  ...
-}
-```
-
-###  `withActivateFeature`
-#### Arguments
-- `Component: React.Component` - component which will be enhanced with the prop `hasFeature()` and `activateFeatureError`.
-
-#### Returns
-- A wrapped component with additional props as described above.
-
-#### Example
-```jsx
-import { withVisitorCode, withActivateFeature, KameleoonException, compose } from '@kameleoon/react-sdk';
-
-class MyComponent extends React.Component {
-  componentDidMount() {
-    const { getVisitorCode, hasFeature, activateFeatureError } = this.props;
-    const visitorCode = getVisitorCode('example.com');
-    const featureKey = 'example-feature-key';
-
-    if (activateFeatureError?.type === KameleoonException.FeatureConfigurationNotFound) {
-      // Handle exception
-    }
-
-    if (activateFeatureError?.type === KameleoonException.NotTargeted) {
-      // Handle exception
-    }
-
-    const feature = hasFeature(featureKey, visitorCode);
-  }
-
-  ...
-}
-
-export default compose(withVisitorCode, withActivateFeature)(MyComponent);
-```
-
-## Obtain variation associated data
-A callback function `getVariationAssociatedData()` which retrieves JSON data associated with a variation. The JSON data usually represents some metadata of the variation, and can be configured on our web application interface or via our Automation API.
-
-This callback function takes the `variationId` as a parameter and will return the data as a JavaScript object. It will throw an exception `(KameleoonException.VariationConfigurationNotFound)` if the `variationId` is wrong or corresponds to an experiment that is not yet online.
-
-#### Exceptions
-- `KameleoonException.VariationConfigurationNotFound` - Exception indicating that the requested variation ID has not been found in the internal configuration of the SDK. This is usually normal and means that the variation's corresponding experiment has not yet been activated on Kameleoon's side.
-
-#### `getVariationAssociatedData()`
-
-##### Arguments
-- `variationId: number` - unique identifier of the variation you want to obtain associated data for.
-
-##### Returns
-- Data associated with this `variationId`.
-
-### `useVariationAssociatedData`
-#### Returns
-- A callback function `getVariationAssociatedData()`.
-- An `error` object containing `name`, `type` and `message` strings, certain type of exception can be handled using `error.type` and `KameleoonException`. If there is no errors on the client `error` will be `null`. 
-
-#### Example
-```jsx
-import { useEffect } from 'react';
-import { useVariationAssociatedData, KameleoonException } from '@kameleoon/react-sdk';
-
-function MyComponent(): JSX.Element {
-  const { getVariationAssociatedData, error } = useVariationAssociatedData();
-
-  useEffect(() => {
-    const variationId = 280295;
-
-    if (error?.type === KameleoonException.VariationConfigurationNotFound) {
-      // Handle error
-    }
-
-    const data = getVariationAssociatedData(variationId);
-  }, []);
-
-  ...
-}
-```
-### `withVariationAssociatedData`
-#### Arguments
-- `Component: React.Component` - component which will be enhanced with the prop `getVariationAssociatedData()`.
-
-#### Returns
-- A wrapped component with additional props as described above.
-
-#### Example
-```jsx
-import { withVariationAssociatedData, KameleoonException } from '@kameleoon/react-sdk';
-
-class MyComponent extends React.Component {
-  componentDidMount() {
-    const { getVariationAssociatedData, variationAssociatedDataError } = this.props;
-    const variationId = 280295;
-
-    if (variationAssociatedDataError?.type === KameleoonException.VariationConfigurationNotFound) {
-      // Handle error
-    }
-
-    const data = getVariationAssociatedData(variationId);
-  }
-
-  ...
-}
-
-export default withVariationAssociatedData(MyComponent);
-```
-
-## Obtain data from remote source
-An callback function `retrieveDataFromRemoteSource()` can be used to retrieve data using specific key and siteCode from Kameleoon provider. The Data is stored on a remote Kameleoon server. Usually data will be stored on our remote servers via the use of our Data API. This method, along with the availability of our highly scalable servers for this purpose, provides a convenient way to quickly store massive amounts of data that can be later retrieved for each of your visitors / users.
-
-Note that since a server call is required, this mechanism is asynchronous, make sure to properly handle promise which will be returned from a function call.
-
-
-#### Exceptions Thrown
-- Local Error will be thrown if remote source data couldn't be accessed or retrieved data contains an empty JSON.
-
-#### `retrieveDataFromRemoteSource()`
-
-##### Arguments
-- `key: string` - unique key for the current siteCode used to store data on the remote source (can be created via `POST` request to Kameleoon Data API). This field is mandatory.
-
-##### Returns
-- JSON object with the data posted to Kameleoon Data API.
-
-#### Types
-- `RemoteSourceDataType` can be used for handling data type.
-
-### `useRetrieveDataFromRemoteSource`
-#### Returns
-- A callback function `retrieveDataFromRemoteSource()`.
-
-#### Example
-```jsx
-import { useEffect, useCallback } from 'react';
-import { useRetrieveDataFromRemoteSource, RemoteSourceDataType } from '@kameleoon/react-sdk';
-
-function MyComponent(): JSX.Element {
-  const { retrieveDataFromRemoteSource } = useRetrieveDataFromRemoteSource();
-
-  const processRetrievedData = useCallback(async () => {
-    const data: RemoteSourceDataType = await retrieveDataFromRemoteSource('example-key');
-    // Your code
-  }, [retrieveDataFromRemoteSource]);
-
-  useEffect(() => {
-    processRetrievedData();
-  }, [processRetrievedData]);
-
-  ...
-}
-```
-### `withRetrieveDataFromRemoteSource`
-#### Arguments
-- `Component: React.Component` - component which will be enhanced with the prop `retrieveDataFromRemoteSource()`.
-
-#### Returns
-- A wrapped component with additional props as described above.
-
-#### Example
-```jsx
-import { withRetrieveDataFromRemoteSource, RemoteSourceDataType } from '@kameleoon/react-sdk';
-
-class MyComponent extends React.Component {
-  async componentDidMount() {
-    const { retrieveDataFromRemoteSource } = this.props;
-    const data: RemoteSourceDataType = await getVariationAssociatedData('example-key');
-    // Your code
-  }
-
-  ...
-}
-
-export default withRetrieveDataFromRemoteSource(MyComponent);
-```
-
-## Obtain feature variable
-A callback function `getFeatureVariable()` which retrieves a feature variable.
-
-This callback function takes two input parameters: `featureKey` and `variableKey`. It will return the data with the expected type, as defined on the web interface. It will throw an exception `(KameleoonException.FeatureConfigurationNotFound)` if the requested feature has not been found in the internal configuration of the SDK.
-
-#### Exceptions Thrown
-- `KameleoonException.FeatureConfigurationNotFound` - Exception indicating that the requested feature ID has not been found in the internal configuration of the SDK. This is usually normal and means that the feature flag has not yet been activated on Kameleoon's side.
-
-#### `getFeatureVariable()`
-
-##### Arguments
-- `featureKey: string | number` - unique identifier or key of the feature you want to obtain to a user.
-- `variableKey: string` - key of the variable.
-##### Returns
-- `featureVariable: FeatureFlagVariableType` - data associated with this variable for this feature flag
-
-### `useFeatureVariable`
-#### Returns
-- A callback function `getFeatureVariable()`.
-
-#### Example
-```jsx
-import { useEffect } from 'react';
-import { useFeatureVariable } from '@kameleoon/react-sdk';
+## Contents
 
-function MyComponent(): JSX.Element {
-  const { getFeatureVariable } = useFeatureVariable();
-
-  useEffect(() => {
-    const featureKey = 'example-feature-key';
-    const variableKey = 'example-variable-key';
-
-    const featureVariable = getFeatureVariable(featureKey, variableKey);
-  }, []);
-
-  ...
-}
-```
-
-### `withFeatureVariable`
-#### Arguments
-- `Component: React.Component` - component which will be enhanced with the prop `getFeatureVariable()`.
-
-#### Returns
-- A wrapped component with additional props as described above.
-
-#### Example
-```jsx
-import { withFeatureVariable } from '@kameleoon/react-sdk';
-
-class MyComponent extends React.Component {
-  componentDidMount() {
-    const { getFeatureVariable } = this.props;
-    const featureKey = 'example-feature-key';
-    const variableKey = 'example-variable-key';
-
-    const featureVariable = getFeatureVariable(featureKey, variableKey);
-  }
-
-  ...
-}
-
-export default withFeatureVariable(MyComponent);
-```
-
-## Tracking conversion
-A callback function `trackConversion()` which tracks conversion. This callback function requires `visitorCode` and `goalId` to track conversion on this particular goal. In addition, `trackConverion()` accepts third optional argument `revenue` to track revenue. The `visitorCode` is usually identical to the one that was used when triggering the experiment.
-
-This callback function doesn't return any value. And it is non-blocking as the server call is made asynchronously.
-
-#### `trackConversion()`
-##### Arguments
-- `visitorCode: string` - unique identifier of the user.
-- `goalId: number` - key of the variable.
-- `revenue: number` (optional) - key of the variable.
-
-### `useTrackingConversion`
-#### Returns
-- A callback function `trackConversion()`;
-
-#### Example
-```jsx
-import { useEffect } from 'react';
-import { useTrackingConversion, useVisitorCode } from '@kameleoon/react-sdk';
-
-function MyComponent(): JSX.Element {
-  const { getVisitorCode } = useVisitorCode();
-  const { trackConversion } = useTrackingConversion();
-
-  useEffect(() => {
-    const visitorCode = getVisitorCode('example.com')
-    const goalId = 280295;
-
-    trackConversion(visitorCode, goalId);
-  }, []);
-
-  ...
-}
-```
-
-### `withTrackingConversion`
-#### Arguments
-- `Component: React.Component` - component which will be enhanced with the prop `trackConversion()`.
-
-#### Returns
-- A wrapped component with additional props as described above.
-
-#### Example
-```jsx
-import { withVisitorCode, withTrackingConversion, compose } from '@kameleoon/react-sdk';
-
-class MyComponent extends React.Component {
-  componentDidMount() {
-    const { getVisitorCode, trackConversion } = this.props;
-    const visitorCode = getVisitorCode('example.com');
-    const goalId = 230234;
-
-    trackConversion(visitorCode, goalId);
-  }
-
-  ...
-}
-
-export default compose(withVisitorCode, withTrackingConversion)(MyComponent);
-```
-
-
-## Add data
-A callback function `addData()` which adds various data to associate this data with the current user. This callback function requires `visitorCode` as a first parameter and then accepts array of various **Data Types** allowed in Kameleoon.
-
-Note that the `addData()` doesn't return any value and doesn't interact with the Kameleoon back-end servers by itself. Instead, all declared data is saved for further sending via the `flush()` described in the next paragraph. This reduces the number of server calls made, as data is usually grouped into a single server call triggered by the execution of `flush()`.
-
-##### Please Note:
-_The `triggerExperiment()` and `trackConversion()` callback functions also sends out previously associated data, exactly as the `flush()`._
-
-#### `addData()`
-##### Arguments
-- `visitorCode: string` - unique identifier of the user.
-- `dataTypes: DataInterface[]` - custom data types which may be passed separated by a comma.
-
-### `useAddData`
-#### Returns
-- A callback function `addData()`.
-
-#### Example
-```jsx
-import { useEffect } from 'react';
-import { Button } from '@kameleoon/ui';
-import {
-  useAddData,
-  useBrowser,
-  useCutomData,
-  useVisitorCode,
-  Browser
-} from '@kameleoon/react-sdk';
-
-function MyComponent(): JSX.Element {
-  const { getVisitorCode } = useVisitorCode();
-  const { addData } = useAddData();
-  const { addBrowser } = useBrowser();
-  const { addCustomData } = useCutomData();
-
-  useEffect(() => {
-    const visitorCode = getVisitorCode('example.com');
-
-    // Single data type passed
-    addData(visitorCode, addBrowser(Browser.Chrome));
-
-    // Several data types passed
-    addData(visitorCode, addBrowser(Browser.Chrome), addCustomData(1, 'some custom value'));
-  }, []);
-
-  ...
-}
-```
-
-### `withAddData`
-#### Arguments
-- `Component: React.Component` - component which will be enhanced with the prop `addData()`.
-
-#### Returns
-- A wrapped component with additional props as described above.
-
-#### Example
-```jsx
-import {
-  withAddData,
-  withBrowser,
-  withCustomData,
-  withVisitorCode,
-  Browser,
-  compose,
-} from '@kameleoon/react-sdk';
-
-class MyComponent extends React.Component {
-  componentDidMount() {
-    const { addData, addBrowser, addCustomData, getVisitorCode } = this.props;
-    const visitorCode = getVisitorCode('example.com');
-
-    // Single data type passed
-    addData(visitorCode, addBrowser(Browser.Chrome));
-
-    // Several data types passed
-    addData(visitorCode, addBrowser(Browser.Chrome), addCustomData(1, 'some custom value'));   
-  }
-
-  ...
-}
-
-export default compose(
-  withAddData,
-  withBrowser,
-  withCustomData,
-  withVisitorCode,
-)(MyComponent);
-```
-
-## Flush data
-Data associated with the current user via `addData()` is not immediately sent to the server. It is stored and accumulated until it is sent automatically by the `triggerExperiment()` or `trackConversion()`, or manually by the `flush()` callback function. This allows the developer to control exactly when the data is flushed to servers. For instance, if you call the `addData()` a dozen times, it would be a waste of resources to send data to the server after each `addData()` invocation. Just call `flush()` once at the end.
-
-The `flush()` callback function is non-blocking as the server call is made asynchronously.
-
-#### `flush()`
-##### Arguments
-- `visitorCode: string` - unique identifier of the user.
-
-### `useFlush`
-#### Returns
-- A callback function `flush()`.
-
-#### Example
-```jsx
-import { useEffect } from 'react';
-import {
-  useAddData,
-  useBrowser,
-  useVisitorCode,
-  useFlush,
-  Browser
-} from '@kameleoon/react-sdk';
-
-function MyComponent(): JSX.Element {
-  const { getVisitorCode } = useVisitorCode();
-  const { addData } = useAddData();
-  const { addBrowser } = useBrowser();
-  const { flush } = useFlush();
-
-  useEffect(() => {
-    const visitorCode = getVisitorCode('example.com');
-
-    addData(visitorCode, addBrowser(Browser.Chrome));
-    flush(visitorCode);
-  }, []);
-
-  ...
-}
-```
-
-### `withFlush`
-#### Arguments
-- `Component: React.Component` - component which will be enhanced with the prop `flush()`.
-
-#### Returns
-- A wrapped component with additional props as described above.
-
-#### Example
-```jsx
-import {
-  withVisitorCode,
-  withAddData,
-  withBrowser,
-  withFlush,
-  Browser,
-  compose,
-} from '@kameleoon/react-sdk';
-
-class MyComponent extends React.Component {
-  componentDidMount() {
-    const { addData, addBrowser, flush, getVisitorCode } = this.props;
-    const visitorCode = getVisitorCode('example.com');
-
-    addData(visitorCode, addBrowser(Browser.Chrome));
-    flush(visitorCode);
-  }
-
-  ...
-}
-
-export default compose(
-  withAddData,
-  withBrowser,
-  withFlush,
-  withVisitorCode,
-)(MyComponent);
-```
-
-## Run when ready
-In certain scenarios when working with Kameleoon API it's important to make sure that the client was initialized properly within the certain timeout. It's especially important while using `triggerExperiment()` or `trackConversion()`. For these cases it's possible to use `runWhenReady()` function, retrieved by `useRunWhenReady` hook or `withRunWhenReady` high-order component.
-
-The `runWhenReady()` function makes sure that Kameleoon Client will be initialized properly using HTTP call withing the specified timeout.
-
-#### `runWhenReady()`
-##### Arguments
-- `successCallback: () => void` - callback which will be executed on successful client initialization.
-- `errorCallback: () => void` - callback which will be executed if client wasn't able to initialize during the timeout.
-- `timeout?: number` - timeout which is given to perform HTTP call for initialization in ms (by default: 2000 ms).
-
-#### Example
-```jsx
-import { useEffect, useCallback, useState } from 'react';
-import { useRunWhenReady, useTriggerExperiment } from '@kameleoon/react-sdk';
-
-function MyComponent(): JSX.Element {
-  const { runWhenReady } = useRunWhenReady();
-  const { getVariationId } = useTriggerExperiment();
-
-  const [variationId, setVariationId] = useState<number>(0);
-
-  const getVariationSuccessCallback = useCallback(() => {
-    const id = getVariationId('user_id', 12345);
-    setVariationId(id);
-  }, [getVariationId, isRenderProps]);
-
-  const getVariationErrorCallback = useCallback(() => {
-    throw new Error(
-      "Couldn't get server configuration from HTTP request in a specified time",
-    );
-  }, []);
-
-  useEffect(() => {
-    runWhenReady(
-      getVariationSuccessCallback,
-      getVariationErrorCallback,
-      1000,
-    );
-  }, [runWhenReady, getVariationSuccessCallback, getVariationErrorCallback]);
-
-  ...
-}
-```
-
-### `withRunWhenReady`
-#### Arguments
-- `Component: React.Component` - component which will be enhanced with the prop `runWhenReady()`.
-
-#### Example
-```jsx
-import { useEffect, useCallback, useState } from 'react';
-import { withRunWhenReady, withTriggerExperiment } from '@kameleoon/react-sdk';
-
-class MyComponent extends React.Component {
-  variationSuccessCallback(): void {
-    const id = this.props.getVariationId('user_id', 12345);
-    setVariationId(id);
-  }
+- [Installation](#installation)
+- [Configuration](#configuration)
 
-  variationErrorCallback(): void {
-    const id = this.props.getVariationId('user_id', 12345);
-    setVariationId(id);
-  }
-
-  componentDidMount() {
-    this.props.runWhenReady(this.variationSuccessCallback, this.variationErrorCallback, 1000);
-  }
-
-  ...
-}
-
-export default compose(
-  withRunWhenReady,
-  withTriggerExperiment,
-)(MyComponent);
-```
-
-#### Returns
-- A wrapped component with additional props as described above.
-
-## Browser
-A callback function `addBrowser()` adds browser type.
-
-#### `addBrowser`
-##### Arguments
-- `browser: Browser` - browser types: CHROME, INTERNET_EXPLORER, FIREFOX, SAFARI, OPERA, OTHER.
-
-##### Returns
-- An instance of `Browser: IBrowser`.
-
-### `useBrowser`
-#### Returns
-- A callback function `addBrowser()`.
-
-#### Example
-```jsx
-import { useEffect } from 'react';
-import { useAddData, useBrowser, useVisitorCode, Browser } from '@kameleoon/react-sdk';
-
-function MyComponent(): JSX.Element {
-  const { addData } = useAddData();
-  const { getVisitorCode } = useVisitorCode();
-  const { addBrowser } = useBrowser();
-
-  useEffect(() => {
-    const visitorCode = getVisitorCode('example.com');
-
-    addData(visitorCode, addBrowser(Browser.Chrome));
-  }, []);
-
-  ...
-}
-```
+## Installation
 
-### `withBrowser`
-#### Arguments
-- `Component: React.Component` - component which will be enhanced with the prop `addBrowser()`.
+- **npm** - `npm install @kameleoon/react-sdk`
+- **yarn** - `yarn add @kameleoon/react-sdk`
+- **pnpm** - `pnpm add @kameleoon/react-sdk`
 
-#### Returns
-- A wrapped component with additional props as described above.
+## Configuration
 
-#### Example
-```jsx
-import {
-  withVisitorCode,
-  withAddData,
-  withBrowser,
-  Browser,
-  compose,
-} from '@kameleoon/react-sdk';
+1. Obtain your site code from [Kameleoon Platform](https://app.kameleoon.com/)
+2. Create client and pass it to `KameleoonProvider`
 
-class MyComponent extends React.Component {
-  componentDidMount() {
-    const { addData, addBrowser, getVisitorCode } = this.props;
-    const visitorCode = getVisitorCode('example.com');
+```tsx
+import { createClient, KameleoonProvider } from '@kameleoon/react-sdk';
 
-    addData(visitorCode, addBrowser(Browser.Chrome));
-  }
+const client = createClient('my_site_code');
 
-  ...
+function MyComponentWrapper(): JSX.Element {
+  return (
+    <KameleoonProvider client={client}>
+      <MyComponent />
+    </KameleoonProvider>
+  );
 }
-
-export default compose(
-  withAddData,
-  withBrowser,
-  withVisitorCode,
-)(MyComponent);
 ```
 
-## PageView
-A callback function `addPageView()` adds page view.
-
-#### `addPageView`
-##### Arguments
-- `url: string` - URL of the page viewed.
-- `title: string` - title of the page viewed.
-- `referrer: number` (optional) - referrer of the page viewed.
+3. Asynchronously initialize client to fetch the configuration from remote server and handle possible errors
 
-##### Returns
-- An instance of `PageView: IPageView`.
-### `usePageView`
-#### Returns
-- A callback function `addPageView()`.
-
-#### Example
-```jsx
+```tsx
 import { useEffect } from 'react';
-import { useAddData, usePageView, useVisitorCode } from '@kameleoon/react-sdk';
-
-function MyComponent(): JSX.Element {
-  const { addData } = useAddData();
-  const { getVisitorCode } = useVisitorCode();
-  const { addPageView } = usePageView();
-
-  useEffect(() => {
-    const visitorCode = getVisitorCode('example.com');
-
-    addData(visitorCode, addPageView('example.com', 'title', 3));
-  }, []);
-
-  ...
-}
-```
-
-### `withPageView`
-#### Arguments
-- `Component: React.Component` - component which will be enhanced with the prop `addPageView()` which recieves the following arguments and returns instance of `PageView: IPageView`.
-  - `url: string` - URL of the page viewed.
-  - `title: string` - title of the page viewed.
-  - `referrer: number` (optional) - referrer of the page viewed.
-
-#### Returns
-- A wrapped component with additional props as described above.
-
-#### Example
-```jsx
 import {
-  withVisitorCode,
-  withAddData,
-  withPageView,
-  compose,
+  useInitialize,
+  getBrowserVisitorCode,
+  useFeatureFlagActive,
 } from '@kameleoon/react-sdk';
 
-class MyComponent extends React.Component {
-  componentDidMount() {
-    const { addData, addPageView, getVisitorCode } = this.props;
-    const visitorCode = getVisitorCode('example.com');
-
-    addData(visitorCode, addPageView('example.com', 'title', 3));
-  }
-
-  ...
-}
-
-export default compose(
-  withAddData,
-  withPageView,
-  withVisitorCode,
-)(MyComponent);
-```
-
-## Conversion
-A callback function `addConversion()` adds conversion.
-
-#### `addConversion`
-##### Arguments
-- `goalId: number` - unique identifier of the goal.
-- `revenue: number` (optional) - coversion revenue.
-- `negative: boolean` (optional) - defines if the revenue is positive or negative.
-
-##### Returns
-- An instance of `Conversion: IConversion`.
-
-### `useConversion`
-#### Returns
-- A callback function `addConversion()`.
-
-#### Example
-```jsx
-import { useEffect } from 'react';
-import { useAddData, useConversion, useVisitorCode } from '@kameleoon/react-sdk';
-
 function MyComponent(): JSX.Element {
-  const { addData } = useAddData();
-  const { getVisitorCode } = useVisitorCode();
-  const { addConversion } = useConversion();
-
-  useEffect(() => {
-    const visitorCode = getVisitorCode('example.com');
-
-    addData(visitorCode, addConversion(32, 10, false));
-  }, []);
+  const { initialize } = useInitialize();
+  const { getBrowserVisitorCode } = useBrowserVisitorCode();
+  const { isFeatureFlagActive } = useFeatureFlagActive();
 
-  ...
-}
-```
-
-### `withConversion`
-#### Arguments
-- `Component: React.Component` - component which will be enhanced with the prop `addConversion()`.
-
-#### Returns
-- A wrapped component with additional props as described above.
+  async function waitForInitialize(): Promise<void> {
+    const isReady = await initialize();
 
-#### Example
-```jsx
-import {
-  withVisitorCode,
-  withAddData,
-  withConversion,
-  compose,
-} from '@kameleoon/react-sdk';
+    if (isReady) {
+      const visitorCode = getBrowserVisitorCode('www.example.com');
 
-class MyComponent extends React.Component {
-  componentDidMount() {
-    const { addData, addConversion, getVisitorCode } = this.props;
-    const visitorCode = getVisitorCode('example.com');
-
-    addData(visitorCode, addConversion(32, 10, false));
+      // -- Check if the feature is active for visitor
+      const isMyFeatureActive = isFeatureFlagActive(
+        visitorCode,
+        'my_feature_key',
+      );
+    }
   }
 
-  ...
-}
-
-export default compose(
-  withAddData,
-  withConversion,
-  withVisitorCode,
-)(MyComponent);
-```
-
-## CustomData
-A callback function `addCustomData()` adds custom data.
-
-##### Please Note:
-_The index (ID) of the custom data is available on our Back-Office, in the Custom data configuration page. Be careful: this index starts at **0**, so the first custom data you create for a given site will have the ID **0**, **not 1**._
-
-#### `addCustomData`
-##### Arguments
-- `index: number` - index or unique identifier of the custom data to be stored.
-- `value: string` - value of the custom data to be stored.
-
-##### Returns
-- An instance of `CustomData: ICustomData`.
-
-### `useCustomData`
-#### Returns
-- A callback function `addCustomData()`.
-
-
-#### Example
-```jsx
-import { useEffect } from 'react';
-import { useAddData, useCustomData, useVisitorCode } from '@kameleoon/react-sdk';
-
-function MyComponent(): JSX.Element {
-  const { addData } = useAddData();
-  const { getVisitorCode } = useVisitorCode();
-  const { addCustomData } = useCustomData();
-
   useEffect(() => {
-    const visitorCode = getVisitorCode('example.com');
-
-    addData(visitorCode, addCustomData(1, 'some custom value'));
+    waitForInitialize();
   }, []);
-
-  ...
 }
 ```
 
-### `withCustomData`
-#### Arguments
-- `Component: React.Component` - component which will be enhanced with the prop `addCustomData()`.
-
-#### Returns
-- A wrapped component with additional props as described above.
+4. `hooks` are ready to use. Note: They can be used only inside `KameleoonProvider`
 
-#### Example
-```jsx
+```tsx
 import {
-  withVisitorCode,
-  withAddData,
-  withCustomData,
-  compose,
+  useAddData,
+  useBrowserVisitorCode,
+  useTriggerExperiment,
+  useFeatureFlagActive,
 } from '@kameleoon/react-sdk';
 
-class MyComponent extends React.Component {
-  componentDidMount() {
-    const { addData, addCustomData, getVisitorCode } = this.props;
-    const visitorCode = getVisitorCode('example.com');
-
-    addData(visitorCode, addCustomData(1, 'some custom value'));
-  }
-
-  ...
-}
-
-export default compose(
-  withAddData,
-  withCustomData,
-  withVisitorCode,
-)(MyComponent);
-```
-
-## Device
-A callback function `addDevice()` adds device.
-
-#### `addDevice`
-##### Arguments
-- `device: DeviceType` - device type: Phone, Tablet, Desktop.
-    
-
-##### Returns
-- An instance of `Device: IDevice`.
-
-### `useDevice`
-#### Returns
-- A callback function `addDevice()`.
-
-#### Example
-```jsx
-import { useEffect } from 'react';
-import { useAddData, useDevice, DeviceType, useVisitorCode } from '@kameleoon/react-sdk';
-
 function MyComponent(): JSX.Element {
   const { addData } = useAddData();
-  const { getVisitorCode } = useVisitorCode();
-  const { addDevice } = useDevice();
-
-  useEffect(() => {
-    const visitorCode = getVisitorCode('example.com');
-
-    addData(visitorCode, addDevice(DeviceType.Desktop));
-  }, []);
-
-  ...
-}
-```
-
-### `withDevice`
-#### Arguments
-- `Component: React.Component` - component which will be enhanced with the prop `addDevice()`.
+  // -- Hook to generate new visitorCode. For React Native use `useNativeVisitorCode` hook
+  const { getBrowserVisitorCode } = useBrowserVisitorCode();
+  const { triggerExperiment } = useTriggerExperiment();
+  const { isFeatureFlagActive } = useFeatureFlagActive();
 
-#### Returns
-- A wrapped component with additional props as described above.
+  const visitorCode = getBrowserVisitorCode('www.example.com');
+  const experimentId = 100;
+  const customDataIndex = 0;
 
-#### Example
-```jsx
-import {
-  withVisitorCode,
-  withAddData,
-  withDevice,
-  DeviceType,
-  compose,
-} from '@kameleoon/react-sdk';
-
-class MyComponent extends React.Component {
-  componentDidMount() {
-    const { addData, addDevice, getVisitorCode } = this.props;
-    const visitorCode = getVisitorCode('example.com');
-
-    addData(visitorCode, addDevice(DeviceType.Desktop));
-  }
-
-  ...
-}
-
-export default compose(
-  withAddData,
-  withDevice,
-  withVisitorCode,
-)(MyComponent);
-```
-
-## Helpers
-### `compose`
-Composes single-argument high order components.
-
-#### Arguments
-- `HOCs` - high order components to be composed.
-
-#### Returns
-- A function obtained by composing the argument HOCs, which is used as single high order component wrapper.
+  // -- Get variation id
+  const variationId = triggerExperiment('my_visitor_code', experimentId);
 
-#### Example
-```jsx
-import { withVisitorCode, withTriggerExperiment, compose } from '@kameleoon/react-sdk';
+  // -- Add targeting data
+  addData(visitorCode, new CustomData(customDataIndex, 'my_data'));
 
-class MyComponent extends React.Component {
-  componentDidMount() {
-    const { getVisitorCode, getVariationId } = this.props;
-    const visitorCode = getVisitorCode('example.com');
-    const experimentId = 230243;
-
-    const variationId = getVariationId(visitorCode, experimentId);
-  }
-
-  ...
+  // -- Check if the feature is active for visitor
+  const isMyFeatureActive = isFeatureFlagActive(visitorCode, 'my_feature_key');
 }
-
-export default compose(withVisitorCode, withTriggerExperiment)(MyComponent);
 ```