{"id":29946098,"url":"https://github.com/wingify/vwo-fme-react-sdk","last_synced_at":"2025-08-03T05:13:01.241Z","repository":{"id":277316405,"uuid":"932010344","full_name":"wingify/vwo-fme-react-sdk","owner":"wingify","description":"VWO Feature Management and Experimentation SDK for React(web)","archived":false,"fork":false,"pushed_at":"2025-08-01T13:11:35.000Z","size":1127,"stargazers_count":6,"open_issues_count":0,"forks_count":2,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-08-01T13:43:12.267Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://developers.vwo.com/v2/docs/fme-react","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wingify.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-02-13T08:09:04.000Z","updated_at":"2025-08-01T13:10:26.000Z","dependencies_parsed_at":null,"dependency_job_id":"b1781090-5ff0-480b-8e18-47d55fb0bd86","html_url":"https://github.com/wingify/vwo-fme-react-sdk","commit_stats":null,"previous_names":["wingify/vwo-fme-react-sdk"],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/wingify/vwo-fme-react-sdk","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wingify%2Fvwo-fme-react-sdk","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wingify%2Fvwo-fme-react-sdk/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wingify%2Fvwo-fme-react-sdk/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wingify%2Fvwo-fme-react-sdk/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wingify","download_url":"https://codeload.github.com/wingify/vwo-fme-react-sdk/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wingify%2Fvwo-fme-react-sdk/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268496076,"owners_count":24259411,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-03T02:00:12.545Z","response_time":2577,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-08-03T05:12:48.626Z","updated_at":"2025-08-03T05:13:01.197Z","avatar_url":"https://github.com/wingify.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# VWO Feature Management and Experimentation SDK for React SDK\n\n[![npm version](https://img.shields.io/npm/v/vwo-fme-react-sdk?style=for-the-badge\u0026color=grey\u0026logo=npm)](https://www.npmjs.com/package/vwo-fme-react-sdk) [![License](https://img.shields.io/github/license/wingify/vwo-fme-react-sdk?style=for-the-badge\u0026color=blue)](http://www.apache.org/licenses/LICENSE-2.0) ![](http://img.badgesize.io/wingify/vwo-fme-react-sdk/master/dist/vwo-fme-react-sdk.cjs.production.min.js?compression=gzip\u0026color=blue\u0026style=for-the-badge)\n\n[![CI](https://img.shields.io/github/actions/workflow/status/wingify/vwo-fme-react-sdk/main.yml?style=for-the-badge\u0026logo=github)](https://github.com/wingify/vwo-fme-react-sdk/actions?query=workflow%3ACI) [![codecov](https://img.shields.io/codecov/c/github/wingify/vwo-fme-react-sdk?token=813UYYMWGM\u0026style=for-the-badge\u0026logo=codecov)](https://codecov.io/gh/wingify/vwo-fme-react-sdk)\n\n## Overview\n\nThe **VWO Feature Management and Experimentation SDK** (VWO FME React SDK) enables React.js developers to integrate feature flagging and experimentation into their applications. This SDK provides full control over feature rollout, A/B testing, and event tracking, allowing teams to manage features dynamically and gain insights into user behavior.\n\n## Requirements\n\n- **React 16.8+**\n\n## Installation\n\nInstall the SDK via [**npm**](https://npmjs.com/package/vwo-fme-react-sdk) or [**yarn**](https://classic.yarnpkg.com/en/package/vwo-fme-react-sdk):\n\n```bash\n# via npm\nnpm install vwo-fme-react-sdk --save\n\n# via yarn\nyarn add vwo-fme-react-sdk\n```\n\n## Getting Started with VWOProvider\n\n### Basic Implementation\n\n```tsx\nimport React from 'react';\nimport { VWOProvider, IVWOOptions, IVWOContextModel } from 'vwo-fme-react-sdk';\n\nconst vwoConfig: IVWOOptions = {\n  sdkKey: '32-alpha-numeric-sdk-key', // Your VWO SDK Key\n  accountId: '123456', // Your VWO Account ID\n  logger: {\n    level: 'debug', // Optional log level for debugging\n  },\n};\n\nconst userContext: IVWOContextModel = {\n  id: 'unique_user_id', // Required: Unique identifier for the user\n  customVariables: { age: 25, location: 'US' }, // Optional\n  userAgent:\n    'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36', // Optional\n  ipAddress: '1.1.1.1', // Optional\n};\n\n// Optional: Provide a fallback UI component that will be displayed while VWOProvider initializes.\n// This is useful for showing a loading state or placeholder content during SDK initialization.\nconst fallbackComponent = \u003cdiv\u003eInitializing VWO...\u003c/div\u003e;\n\nconst App = () =\u003e (\n  \u003cVWOProvider config={vwoConfig} userContext={userContext} fallbackComponent={fallbackComponent}\u003e\n    \u003cYourComponent /\u003e\n  \u003c/VWOProvider\u003e\n);\n\nexport default App;\n```\n\n### Using Pre-initialized VWO Client\n\nIf you have already initialized a VWO client in your application, you can pass it directly to the VWOProvider:\n\n```typescript\nimport React, { useEffect, useState } from 'react';\nimport { VWOProvider, IVWOOptions, IVWOClient, IVWOContextModel, init } from 'vwo-fme-react-sdk';\n\nconst vwoConfig: IVWOOptions = {\n  sdkKey: '32-alpha-numeric-sdk-key', // Replace with your real SDK key\n  accountId: '123456', // Replace with your real account ID\n  logger: {\n    level: 'debug',\n  },\n};\n\nconst userContext: IVWOContextModel = {\n  id: 'unique_user_id',\n  customVariables: { age: 25, location: 'US' },\n  userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36',\n  ipAddress: '1.1.1.1',\n};\n\nconst fallbackComponent = \u003cdiv\u003eInitializing VWO...\u003c/div\u003e;\n\nconst App = () =\u003e {\n  const [vwoClient, setVwoClient] = useState\u003cIVWOClient | null\u003e(null);\n\n  useEffect(() =\u003e {\n    const initializeVWO = async () =\u003e {\n      const client = await init(vwoConfig);\n      setVwoClient(client);\n    };\n\n    initializeVWO();\n  }, []);\n\n  if (!vwoClient) return fallbackComponent;\n\n  return (\n    \u003cVWOProvider client={vwoClient} userContext={userContext}\u003e\n      \u003cYourComponent /\u003e\n    \u003c/VWOProvider\u003e\n  );\n};\n\nexport default App;\n```\n\n### Basic Implementation without User Context\n\nIf you don't have user details available while initialising the VWOProvider you can pass it later in `useGetFlag` hook.\n\n```typescript\nimport React from 'react';\nimport { VWOProvider, IVWOOptions, IVWOContextModel } from 'vwo-fme-react-sdk';\n\nconst vwoConfig: IVWOOptions = {\n  sdkKey: '32-alpha-numeric-sdk-key', // Your VWO SDK Key\n  accountId: '123456', // Your VWO Account ID\n  logger: {\n    level: 'debug', // Optional log level for debugging\n  },\n};\n\n// Optional: Provide a fallback UI component that will be displayed while VWOProvider initializes.\n// This is useful for showing a loading state or placeholder content during SDK initialization.\nconst fallbackComponent = \u003cdiv\u003eInitializing VWO...\u003c/div\u003e;\n\nconst App = () =\u003e (\n  \u003cVWOProvider config={vwoConfig} fallbackComponent={fallbackComponent}\u003e\n    \u003cYourComponent /\u003e\n  \u003c/VWOProvider\u003e\n);\n\nexport default App;\n\n```\n\nTo learn more about on how to pass context in `useGetFlag` hook, [click here](#basic-feature-flagging).\n\n## Advanced Configuration Options\n\nTo customize the SDK further, additional parameters can be passed to the `VWOProvider` component using `config` parameter. Here’s a table describing each option:\n\n| **Parameter**  | **Description**                                                                                                                                             | **Required** | **Type** | **Example**                     |\n| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | -------- | ------------------------------- |\n| `accountId`    | VWO Account ID for authentication.                                                                                                                          | Yes          | String   | `'123456'`                      |\n| `sdkKey`       | SDK key corresponding to the specific environment to initialize the VWO SDK Client. You can get this key from VWO Application.                              | Yes          | String   | `'32-alpha-numeric-sdk-key'`    |\n| `pollInterval` | Time interval for fetching updates from VWO servers (in milliseconds).                                                                                      | No           | Number   | `60000`                         |\n| `storage`      | Custom storage connector for persisting user decisions and campaign data.                                                                                   | No           | Object   | See [Storage](#storage) section |\n| `logger`       | Toggle log levels for more insights or for debugging purposes. You can also customize your own transport in order to have better control over log messages. | No           | Object   | See [Logger](#logger) section   |\n\nRefer to the [official VWO documentation](https://developers.vwo.com/v2/docs/fme-react-initialization) for additional parameter details.\n\n## Available Hooks\n\nThe VWO FME React SDK offers a comprehensive suite of React hooks that enable seamless integration of feature management and experimentation capabilities into your application. Here are the key hooks available:\n\n| Hook                  | Definition                                                     | Example                                                             |\n| --------------------- | -------------------------------------------------------------- | ------------------------------------------------------------------- |\n| `useGetFlag`          | Retrieve feature flag status and variables for a specific user | [Learn how to use feature flags](#basic-feature-flagging)           |\n| `useGetFlagVariable`  | Access individual feature flag variables                       | [Learn how to access individual variables](#basic-feature-flagging) |\n| `useGetFlagVariables` | Get all variables associated with a feature flag               | [Learn how to access all flag variables](#basic-feature-flagging)   |\n| `useTrackEvent`       | Track custom events and user interactions                      | [Learn how to track user events](#custom-event-tracking)            |\n| `useSetAttribute`     | Set user attributes for targeting and segmentation             | [Learn how to set user attributes](#pushing-attributes)             |\n| `useVWOClient`        | Access the underlying VWO client instance                      | [Learn how to access VWO client](#vwo-client-usage)                 |\n\n### User Context\n\nThe `context` object uniquely identifies users and is crucial for consistent feature rollouts. A typical `context` includes an `id` for identifying the user. It can also include other attributes that can be used for targeting and segmentation, such as `customVariables`, `userAgent` and `ipAddress`.\n\n#### Parameters Table\n\nThe following table explains all the parameters in the `context` object:\n\n| **Parameter**     | **Description**                                                            | **Required** | **Type** | **Example**                       |\n| ----------------- | -------------------------------------------------------------------------- | ------------ | -------- | --------------------------------- |\n| `id`              | Unique identifier for the user.                                            | Yes          | String   | `'unique_user_id'`                |\n| `customVariables` | Custom attributes for targeting.                                           | No           | Object   | `{ age: 25, location: 'US' }`     |\n| `userAgent`       | User agent string for identifying the user's browser and operating system. | No           | String   | `'Mozilla/5.0 ... Safari/537.36'` |\n| `ipAddress`       | IP address of the user.                                                    | No           | String   | `'1.1.1.1'`                       |\n\n#### Example\n\n```typescript\nimport { IVWOContextModel } from 'vwo-fme-react-sdk';\n\nconst userContext: IVWOContextModel = {\n  id: 'unique_user_id',\n  customVariables: { age: 25, location: 'US' },\n  userAgent:\n    'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36',\n  ipAddress: '1.1.1.1',\n};\n```\n\n### VWO Client Usage\n\nThe `useVWOClient` hook provides direct access to the underlying VWO client instance, allowing you to utilize all available VWO client methods like `getFlag`, `trackEvent` and `setAttribute`.\n\n#### Hook Return Type\n\n| Property    | Description                                                                | Type         |\n| ----------- | -------------------------------------------------------------------------- | ------------ |\n| `vwoClient` | VWO client instance with access to all client methods                      | `IVWOClient` |\n| `isReady`   | Boolean indicating whether the VWO SDK client has initialized successfully | `boolean`    |\n\n#### Example Usage\n\n```typescript\nimport React, { useEffect, useState } from 'react';\nimport { useVWOClient, IVWOContextModel } from 'vwo-fme-react-sdk';\n\nconst FeatureFlagComponent = () =\u003e {\n  const [isFeatureEnabled, setIsFeatureEnabled] = useState(false);\n  const {vwoClient, isReady } = useVWOClient();\n\n  useEffect(() =\u003e {\n    const checkFeature = async () =\u003e {\n      if (!isReady) {\n        console.log('VWO Client not available');\n        return;\n      }\n\n      // Define user context (could be dynamic)\n      const userContext: IVWOContextModel = { id: 'unique_user_id' };\n\n      try {\n        // Fetch the feature flag using getFlag method\n        const flag = await vwoClient.getFlag('feature_key', userContext);\n\n        // Check if the feature is enabled\n        setIsFeatureEnabled(flag.isEnabled());\n      } catch (error) {\n        console.error('Error checking feature flag:', error);\n      }\n    };\n\n    checkFeature();\n  }, [vwoClient, isReady]);\n\n  return (\n    \u003cdiv\u003e\n      {isFeatureEnabled ? (\n        \u003cp\u003eThe feature is enabled!\u003c/p\u003e\n      ) : (\n        \u003cp\u003eThe feature is not enabled.\u003c/p\u003e\n      )}\n    \u003c/div\u003e\n  );\n};\n\nexport default FeatureFlagComponent;\n```\n\n### Basic Feature Flagging\n\nFeature Flags serve as the foundation for all testing, personalization, and rollout rules within FME.\nTo implement a feature flag, first use the `useGetFlag` hook to retrieve the flag configuration.\nThe `useGetFlag` hook provides a simple way to check if a feature is enabled for a specific user and access its variables. It returns a feature flag object that contains methods for checking the feature's status and retrieving any associated variables.\n\n#### Hook Parameters\n\n| Parameter    | Description                                                    | Required | Type   | Example                   |\n| ------------ | -------------------------------------------------------------- | -------- | ------ | ------------------------- |\n| `featureKey` | Unique identifier of the feature flag                          | Yes      | String | `'new_checkout'`          |\n| `context`    | User Context to be passed, if not at the time of `VWOProvider` | No       | Object | `{ id: 'unique_user_id'}` |\n\n#### Hook Return Type\n\nThe `useGetFlag` hook returns a flag object and an `isReady` boolean that indicates when the VWO SDK client has initialized and the flag data is available.\n\n| Property  | Description                                                                | Type      |\n| --------- | -------------------------------------------------------------------------- | --------- |\n| `flag`    | Feature flag object containing status and variables                        | `IFlag`   |\n| `isReady` | Boolean indicating whether the VWO SDK client has initialized successfully | `boolean` |\n\nThe `IFlag` object contains methods and properties for checking feature status and accessing variables. It is recommended to check `isReady` before using the `flag` object to ensure proper initialization.\n\nUse the `isReady` flag to determine when the feature flag data has been fully initialized and is safe to access. This helps prevent rendering based on incomplete or default flag values, thereby avoiding flicker or inconsistent UI states.\n\nExample Usage if `userContext` was already provided in `VWOProvider`.\n\n```typescript\nimport React from 'react';\nimport { useGetFlag, useGetFlagVariable, useGetFlagVariables } from 'vwo-fme-react-sdk'; // Import hooks\n\nconst YourComponent = () =\u003e {\n  // Retrieve the flag using the feature key\n  const { flag, isReady } = useGetFlag('feature_key');\n\n  // Or, pass userContext, if not provided at the time of using VWOProvider or you want to use updated user context\n  // const { flag, isReady } = useGetFlag('feature_key', userContext);\n\n  if (!isReady) { return \u003cdiv\u003eDefault/Zero state\u003c/div\u003e; }\n\n  // Use the flag object returned by useGetFlag to retrieve a specific variable\n  const variableValue = useGetFlagVariable(flag, \"variable-value\", \"default-value\");\n  const allVariable = useGetFlagVariable(flag);\n\n  return (\n    \u003cdiv\u003e\n      {/* Display the feature flag variable value */}\n      \u003cp\u003eFeature Flag Variable Value: {variableValue}\u003c/p\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default YourComponent;\n```\n\nExample Usage if `userContext` was not provided in `VWOProvider`.\n\n```typescript\nimport React from 'react';\nimport { useGetFlag, useGetFlagVariable, IVWOContextModel } from 'vwo-fme-react-sdk'; // Import hooks\n\nconst YourComponent = () =\u003e {\n\n  const userContext: IVWOContextModel = {\n    id: 'unique_user_id',\n    customVariables: { age: 25, location: 'US' },\n    userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36',\n    ipAddress: '1.1.1.1',\n  };\n  // Retrieve the flag using the feature key\n  const { flag, isReady } = useGetFlag('feature_key', userContext);\n\n  if (!isReady) { return \u003cdiv\u003eDefault/Zero state\u003c/div\u003e; }\n\n  // Use the flag object returned by useGetFlag to retrieve a specific variable\n  const variableValue = useGetFlagVariable(flag, \"variable-value\", \"default-value\");\n\n  return (\n    \u003cdiv\u003e\n      {/* Display the feature flag variable value */}\n      \u003cp\u003eFeature Flag Variable Value: {variableValue}\u003c/p\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default YourComponent;\n```\n\n### Custom Event Tracking\n\nFeature flags can be enhanced with connected metrics to track key performance indicators (KPIs) for your features. These metrics help measure the effectiveness of your testing rules by comparing control versus variation performance, and evaluate the impact of personalization and rollout campaigns. Use the `useTrackEvent` hook to track custom events like conversions, user interactions, and other important metrics.\n\nThe `useTrackEvent` hook returns an object containing a `trackEvent` function and an `isReady` boolean. The `trackEvent` function allows you to track custom events and conversions, while `isReady` indicates if the hook is ready to be used. The `trackEvent` function accepts the following parameters:\n\n| Parameter         | Description                                              | Required | Type   | Example                |\n| ----------------- | -------------------------------------------------------- | -------- | ------ | ---------------------- |\n| `eventName`       | Name of the event you want to track                      | Yes      | String | `'purchase_completed'` |\n| `eventProperties` | Additional properties/metadata associated with the event | No       | Object | `{ amount: 49.99 }`    |\n\nExample usage:\n\n```javascript\nimport { useTrackEvent } from 'vwo-fme-react-sdk';\n\nfunction YourComponent() {\n  const { trackEvent, isReady } = useTrackEvent();\n\n  return \u003cbutton onClick={() =\u003e trackEvent('button_clicked')}\u003eClick Me\u003c/button\u003e;\n}\n```\n\nSee [Tracking Conversions](https://developers.vwo.com/v2/docs/fme-react-metrics-tracking#usage) documentation for more information.\n\n### Pushing Attributes\n\nUser attributes provide rich contextual information about users, enabling powerful personalization. The `useSetAttribute` hook provides a simple way to associate these attributes with users in VWO for advanced segmentation.\nThe `useSetAttribute` hook returns an object containing a `setAttribute` function and an `isReady` boolean. The `setAttribute` allows you to set user attribute, while `isReady` indicates if the hook is ready to be used. This `setAttribute` function accepts the following parameters:\n\n| Parameter      | Description                                                                                                                        | Required | Type   | Example                       |\n| -------------- | ---------------------------------------------------------------------------------------------------------------------------------- | -------- | ------ | ----------------------------- |\n| `attributeMap` | A key-value map of attributes to set for the user. The keys are attribute names and values are the corresponding attribute values. | Yes      | Object | `{ age: 25, location: 'US' }` |\n\nExample usage:\n\n```javascript\nimport { useSetAttribute } from 'vwo-fme-react-sdk';\n\nfunction YourComponent() {\n  const { setAttribute, isReady } = useSetAttribute();\n\n  return \u003cbutton onClick={() =\u003e setAttribute({ age: 25, location: 'US' })}\u003eClick Me\u003c/button\u003e;\n}\n```\n\nSee [Pushing Attributes](https://developers.vwo.com/v2/docs/fme-react-attributes#usage) documentation for additional information.\n\n### Polling Interval Adjustment\n\nThe `pollInterval` is an optional parameter that allows the SDK to automatically fetch and update settings from the VWO server at specified intervals. Setting this parameter ensures your application always uses the latest configuration.\n\n```typescript\nimport { VWOProvider, IVWOOptions, IVWOContextModel } from 'vwo-fme-react-sdk';\nconst vwoConfig: IVWOOptions = {\n  sdkKey: '32-alpha-numeric-sdk-key', // Your VWO SDK Key\n  accountId: '123456', // Your VWO Account ID\n  pollInterval: 60000, // Time interval for fetching updates from VWO servers (in milliseconds)\n};\n\nconst userContext: IVWOContextModel = { id: 'unique_user_id' };\n\nconst App = () =\u003e (\n  \u003cVWOProvider config={vwoConfig} userContext={userContext}\u003e\n    \u003cYourComponent /\u003e\n  \u003c/VWOProvider\u003e\n);\n```\n\n### Storage\n\nThe SDK operates in a stateless mode by default, meaning each `useGetFlag` hook triggers a fresh evaluation of the flag against the current user context.\n\nTo optimize performance and maintain consistency, you can implement a custom storage mechanism by passing a `storage` parameter during initialization. This allows you to persist feature flag decisions in your preferred database system (like Redis, MongoDB, or any other data store).\n\nKey benefits of implementing storage:\n\n- Improved performance by caching decisions\n- Consistent user experience across sessions\n- Reduced load on your application\n\nThe storage mechanism ensures that once a decision is made for a user, it remains consistent even if campaign settings are modified in the VWO Application. This is particularly useful for maintaining a stable user experience during A/B tests and feature rollouts.\n\n```typescript\nimport { VWOProvider, IVWOOptions, IVWOContextModel, StorageConnector } from 'vwo-fme-react-sdk';\n\nclass StorageConnector extends StorageConnector {\n  constructor() {\n    super();\n  }\n\n  /**\n   * Get data from storage\n   * @param {string} featureKey\n   * @param {string} userId\n   * @returns {Promise\u003cany\u003e}\n   */\n  async get(featureKey, userId) {\n    // return await data (based on featureKey and userId)\n  }\n\n  /**\n   * Set data in storage\n   * @param {object} data\n   */\n  async set(data) {\n    // Set data corresponding to a featureKey and user ID\n    // Use data.featureKey and data.userId to store the above data for a specific feature and a user\n  }\n}\n\nconst vwoConfig: IVWOOptions = {\n  sdkKey: '32-alpha-numeric-sdk-key', // Your VWO SDK Key\n  accountId: '123456', // Your VWO Account ID\n  logger: {\n    level: 'debug', // Optional log level for debugging\n  },\n  storage: StorageConnector,\n};\n\nconst userContext: IVWOContextModel = {id: 'unique_user_id'};\n\nconst App = () =\u003e (\n  \u003cVWOProvider config={vwoConfig} userContext={userContext}\u003e\n    \u003cYourComponent /\u003e\n  \u003c/VWOProvider\u003e\n);\n\nexport default App;\n```\n\n### Logger\n\nVWO by default logs all `ERROR` level messages to your server console.\nTo gain more control over VWO's logging behaviour, you can use the `logger` parameter in the `init` configuration.\n\n| **Parameter** | **Description**                        | **Required** | **Type** | **Example**           |\n| ------------- | -------------------------------------- | ------------ | -------- | --------------------- |\n| `level`       | Log level to control verbosity of logs | Yes          | String   | `DEBUG`               |\n| `prefix`      | Custom prefix for log messages         | No           | String   | `'CUSTOM LOG PREFIX'` |\n\n#### Example 1: Set log level to control verbosity of logs\n\n```typescript\nimport { VWOProvider, IVWOOptions, IVWOContextModel } from 'vwo-fme-react-sdk';\nconst vwoConfig: IVWOOptions = {\n  sdkKey: '32-alpha-numeric-sdk-key', // SDK Key\n  accountId: '123456', // VWO Account ID\n  logger: {\n    level: 'debug',\n  },\n};\n\nconst userContext: IVWOContextModel = {id: 'unique_user_id'};\n\nconst App = () =\u003e (\n  \u003cVWOProvider config={vwoConfig} userContext={userContext}\u003e\n    \u003cYourComponent /\u003e\n  \u003c/VWOProvider\u003e\n);\n\nexport default App;\n```\n\n#### Example 2: Add custom prefix to log messages for easier identification\n\n```typescript\nimport { VWOProvider, IVWOOptions, IVWOContextModel } from 'vwo-fme-react-sdk';\nconst vwoConfig: IVWOOptions = {\n  sdkKey: '32-alpha-numeric-sdk-key', // SDK Key\n  accountId: '123456', // VWO Account ID\n  logger: {\n    level: 'debug',\n    prefix: 'CUSTOM LOG PREFIX', // custom logger prefix\n  },\n};\n\nconst userContext: IVWOContextModel = {id: 'unique_user_id'};\n\nconst App = () =\u003e (\n  \u003cVWOProvider config={vwoConfig} userContext={userContext}\u003e\n    \u003cYourComponent /\u003e\n  \u003c/VWOProvider\u003e\n);\n\nexport default App;\n```\n\n### Version History\n\nThe version history tracks changes, improvements, and bug fixes in each version. For a full history, see the [CHANGELOG.md](https://github.com/wingify/vwo-fme-react-sdk/blob/master/CHANGELOG.md).\n\n## Development and Testing\n\n### Install Dependencies and Bootstrap Git Hooks\n\n```bash\nyarn install\n```\n\n### Compile TypeScript to JavaScript\n\n```bash\nyarn build\n```\n\n## Contributing\n\nWe welcome contributions to improve this SDK! Please read our [contributing guidelines](https://github.com/wingify/vwo-fme-react-sdk/blob/master/CONTRIBUTING.md) before submitting a PR.\n\n## Code of Conduct\n\nOur [Code of Conduct](https://github.com/wingify/vwo-fme-react-sdk/blob/master/CODE_OF_CONDUCT.md) outlines expectations for all contributors and maintainers.\n\n## License\n\n[Apache License, Version 2.0](https://github.com/wingify/vwo-fme-react-sdk/blob/master/LICENSE)\n\nCopyright 2025 Wingify Software Pvt. Ltd.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwingify%2Fvwo-fme-react-sdk","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwingify%2Fvwo-fme-react-sdk","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwingify%2Fvwo-fme-react-sdk/lists"}