@kameleoon/react-sdk 1.2.2 → 3.0.0

package/CHANGELOG.md

@@ -5,6 +5,35 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 [Project Homepage](https://developers.kameleoon.com/react-js-sdk.html)
 
+# 3.0.0 (2022-07-01)
+
+
+### Features
+ 
+* error handling 
+
+### Breaking change
+
+* `useFeature` hook and `withFeature` high-order component can no longer be used the same way 
+
+# 2.1.0 (2022-04-18)
+
+
+### Features
+
+* retrieve data from remote source 
+
+# 2.0.0 (2022-02-24)
+
+
+### Features
+
+* add multi environment support 
+
+### Breaking change
+
+* variableKeys became an object and no longer can be used as an array or a string 
+
 # 1.2.2 (2022-02-06)
 
 

package/README.md

@@ -29,8 +29,11 @@ A `KameleoonClient` created using `createClient()` to run experiments and retriv
   - `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) - this specifies 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) - this specifies 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**.
+    - `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.
@@ -40,11 +43,12 @@ A `KameleoonClient` created using `createClient()` to run experiments and retriv
 import { createClient } from '@kameleoon/react-sdk';
 
 const client = createClient({
-  siteCode: '0fpmcg34lg',
+  siteCode: 'dfl102d38e',
   visitorCode: '280295',
   options: {
     visitor_data_maximum_size: 1,
-    actions_configuration_refresh_interval: 60
+    actions_configuration_refresh_interval: 60,
+    environment: 'staging'
   }
 });
 ```
@@ -61,11 +65,12 @@ Use this provider in root level by wrapping your app to gain an access to `Kamel
 import { KameleoonProvider, createClient } from '@kameleoon/react-sdk';
 
 const client = createClient({
-  siteCode: '0fpmcg34lg'
+  siteCode: 'dfl102d38e'
   visitorCode: '280295',
   options: {
     visitor_data_maximum_size: 1,
-    actions_configuration_refresh_interval: 60
+    actions_configuration_refresh_interval: 60,
+    environment: 'staging'
   }
 });
 
@@ -128,30 +133,47 @@ 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.
-  - `variableKey: string | string[]` - key of the variable.
+  - `variableKeys: VariableKeysType` - keys for the variables on different environments.
   - `visitorCode: string` (optional) - unique identifier of the user.
 
 #### Returns
-- `featureResult: IFeature`
+- `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 } from '@kameleoon/react-sdk';
+import { useFeature, useVisitorCode, KameleoonException } from '@kameleoon/react-sdk';
 
 function MyComponent(): JSX.Element {
   const { getVisitorCode } = useVisitorCode();
-  const { isActive } = useFeature({
+  const { feature, errors } = useFeature({
     featureKey: 'red-button',
-    variableKey: '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'} />;
 }
 ```
@@ -160,18 +182,40 @@ function MyComponent(): JSX.Element {
 #### Example
 ```jsx
 import { Button } from '@kameleoon/ui';
-import { withFeature } from '@kameleoon/react-sdk';
+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() {
-    const { isActive, variables } = this.props;
-    return <Button theme={isActive ? 'red' : 'green'} />;
+    return <Button theme={this.isActive ? 'red' : 'green'} />;
   }
 }
 
 export default withFeature({
   featureKey: 'red-button',
-  variableKey: 'red-button',
+  variableKeys: { production: 'red-button' },
   visitorCode: '280295'
 })(MyComponent);
 ```
@@ -180,11 +224,13 @@ export default withFeature({
 #### 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.
-- `variableKey: string` - key of the variable.
+- `variableKeys: VariableKeysType` - keys for the variables on different environments.
 - `visitorCode: string` - unique identifier of the user.
 
 #### Returns
-- A wrapped component with the following props:
+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.
 
@@ -194,18 +240,44 @@ 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() {
-    const { isActive, variables } = this.props;
-    return <Button theme={isActive ? 'red' : 'green'} />;
+    return <Button theme={this.isActive ? 'red' : 'green'} />;
   }
 }
 
-class MyCompWrapper extends React.Component { 
+class MyComponentWrapper extends React.Component { 
   render() {
     return(
-      <Feature featureKey="red-button" variableKey="red-button" visitorCode="280295">
-        (({isActive, variables}) => (
-          <MyComponent isActive={isActive} variables={variables} />
+      <Feature 
+        featureKey="red-button" 
+        variableKeys={{production: "red-button"}} 
+        visitorCode="280295"
+      >
+        (({ feature, errors }) => (
+          <MyComponent feature={feature} errors={errors} />
         ))
       </Feature>;
     )
@@ -299,7 +371,7 @@ You have to make sure that proper error handling is set up in your code as shown
 ##### Please Note:
 _By convention, the reference (original variation) always has an ID equal to **0**._
 
-#### Exceptions Thrown
+#### 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).
@@ -315,20 +387,33 @@ _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 } from '@kameleoon/react-sdk';
+import { useTriggerExperiment, useVisitorCode, KameleoonException } from '@kameleoon/react-sdk';
 
 function MyComponent(): JSX.Element {
-  const { getVariationId } = useTriggerExperiment();
+  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);
   }, []);
 
@@ -345,14 +430,26 @@ function MyComponent(): JSX.Element {
 
 #### Example
 ```jsx
-import { withVisitorCode, withTriggerExperiment, compose } from '@kameleoon/react-sdk';
+import { withVisitorCode, withTriggerExperiment, compose, KameleoonException } from '@kameleoon/react-sdk';
 
 class MyComponent extends React.Component {
   componentDidMount() {
-    const { getVisitorCode, getVariationId } = this.props;
+    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);
   }
 
@@ -365,9 +462,9 @@ 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 properly the error.
+If feature flag is not activated, `KameleoonException.FeatureConfigurationNotFound` exception will be thrown. Please, make sure to handle the error properly.
 
-#### Exceptions Thrown
+#### 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).
 
@@ -382,20 +479,29 @@ If feature flag is not activated, `KameleoonException.FeatureConfigurationNotFou
 ### `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 } from '@kameleoon/react-sdk';
+import { useActivateFeature, useVisitorCode, KameleoonException } from '@kameleoon/react-sdk';
 
 function MyComponent(): JSX.Element {
-  const { hasFeature } = useActivateFeature();
+  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(visitorCode, featureKey);
   }, []);
 
@@ -405,21 +511,29 @@ function MyComponent(): JSX.Element {
 
 ###  `withActivateFeature`
 #### Arguments
-- `Component: React.Component` - component which will be enhanced with the prop `hasFeature()`.
+- `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, compose } from '@kameleoon/react-sdk';
+import { withVisitorCode, withActivateFeature, KameleoonException, compose } from '@kameleoon/react-sdk';
 
 class MyComponent extends React.Component {
   componentDidMount() {
-    const { getVisitorCode, hasFeature } = this.props;
+    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(visitorCode, featureKey);
   }
 
@@ -430,11 +544,11 @@ export default compose(withVisitorCode, withActivateFeature)(MyComponent);
 ```
 
 ## Obtain variation associated data
-A callback function `getVariationAssociatedData()` which retrieves JSON data assiciated 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.
+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 calllback 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.
+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 Thrown
+#### 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()`
@@ -448,17 +562,23 @@ This calllback function takes the `variationId` as a parameter and will return t
 ### `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 } from '@kameleoon/react-sdk';
+import { useVariationAssociatedData, KameleoonException } from '@kameleoon/react-sdk';
 
 function MyComponent(): JSX.Element {
-  const { getVariationAssociatedData } = useVariationAssociatedData();
+  const { getVariationAssociatedData, error } = useVariationAssociatedData();
 
   useEffect(() => {
     const variationId = 280295;
+
+    if (error?.type === KameleoonException.VariationConfigurationNotFound) {
+      // Handle error
+    }
+
     const data = getVariationAssociatedData(variationId);
   }, []);
 
@@ -474,12 +594,17 @@ function MyComponent(): JSX.Element {
 
 #### Example
 ```jsx
-import { withVariationAssociatedData } from '@kameleoon/react-sdk';
+import { withVariationAssociatedData, KameleoonException } from '@kameleoon/react-sdk';
 
 class MyComponent extends React.Component {
   componentDidMount() {
-    const { getVariationAssociatedData } = this.props;
+    const { getVariationAssociatedData, variationAssociatedDataError } = this.props;
     const variationId = 280295;
+
+    if (variationAssociatedDataError?.type === KameleoonException.VariationConfigurationNotFound) {
+      // Handle error
+    }
+
     const data = getVariationAssociatedData(variationId);
   }
 
@@ -489,6 +614,74 @@ class MyComponent extends React.Component {
 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.
 
@@ -725,7 +918,6 @@ The `flush()` callback function is non-blocking as the server call is made async
 #### Example
 ```jsx
 import { useEffect } from 'react';
-import { Button } from '@kameleoon/ui';
 import {
   useAddData,
   useBrowser,
@@ -789,6 +981,86 @@ export default compose(
 )(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);
+  }
+
+  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.

package/dist/Feature.js

@@ -19,8 +19,8 @@ var useFeature_1 = require("./useFeature");
  * to the status of a feature flag and its variables
  */
 function Feature(props) {
-    var feature = (0, useFeature_1.useFeature)(__assign({}, props));
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.children(feature) }, void 0);
+    var result = (0, useFeature_1.useFeature)(__assign({}, props));
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.children(result) }, void 0);
 }
 exports.Feature = Feature;
 //# sourceMappingURL=Feature.js.map

package/dist/Feature.js.map

@@ -1 +1 @@
-{"version":3,"file":"Feature.js","sourceRoot":"","sources":["../src/Feature.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AACA,2CAA0C;AAM1C;;;GAGG;AACH,SAAgB,OAAO,CAAC,KAAoB;IAC1C,IAAM,OAAO,GAAG,IAAA,uBAAU,eAAM,KAAK,EAAG,CAAC;IAEzC,OAAO,2DAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,WAAI,CAAC;AACxC,CAAC;AAJD,0BAIC"}
+{"version":3,"file":"Feature.js","sourceRoot":"","sources":["../src/Feature.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AACA,2CAA0C;AAM1C;;;GAGG;AACH,SAAgB,OAAO,CAAC,KAAoB;IAC1C,IAAM,MAAM,GAAG,IAAA,uBAAU,eAAM,KAAK,EAAG,CAAC;IAExC,OAAO,2DAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,WAAI,CAAC;AACvC,CAAC;AAJD,0BAIC"}

package/dist/KameleoonError.d.ts

@@ -0,0 +1,5 @@
+import { KameleoonException } from './constants';
+export declare class KameleoonError extends Error {
+    type: KameleoonException;
+    constructor(type: KameleoonException);
+}

package/dist/KameleoonError.js

@@ -0,0 +1,31 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KameleoonError = void 0;
+var KameleoonError = /** @class */ (function (_super) {
+    __extends(KameleoonError, _super);
+    function KameleoonError(type) {
+        var _this = _super.call(this, "Error: ".concat(type)) || this;
+        _this.name = 'KameleoonError';
+        _this.message = "".concat(_this.name, ".").concat(type);
+        _this.type = type;
+        return _this;
+    }
+    return KameleoonError;
+}(Error));
+exports.KameleoonError = KameleoonError;
+//# sourceMappingURL=KameleoonError.js.map