[REACT-SDK] add multiprovider support

website/docs/sdk-reference/react.mdx

@@ -131,6 +131,7 @@ _ConfigCat Client_ is responsible for:
 | `sdkKey`      | **REQUIRED.** SDK Key to access your feature flags and configurations. Get it from _ConfigCat Dashboard_.                               | -                      |
 | `pollingMode` | Optional. The polling mode to use to acquire the setting values from the ConfigCat servers. [More about polling modes](#polling-modes). | `PollingMode.AutoPoll` |
 | `options`     | Optional. The options object. See the table below.                                                                                      | -                      |
+| `id`          | Optional. Instructs the ConfigCat Client to use a specific `ConfigCatProvider` instead of the default one. Use it if you have multiple `ConfigCatProvider`s in your code. [More about multiple providers](#using-multiple-providers).                                  | `undefined` (none)     |
 
 The available options depends on the chosen polling mode. However, there are some common options which can be set in the case of every polling mode:
 
@@ -176,6 +177,7 @@ The SDK supports two ways to acquire the initialized ConfigCat instance:
 | `key`          | **REQUIRED.** Setting-specific key. Set on _ConfigCat Dashboard_ for each setting.                                         |
 | `defaultValue` | **REQUIRED.** This value will be returned in case of an error.                                                             |
 | `user`         | Optional, _User Object_. Essential when using Targeting. [Read more about Targeting.](../targeting/targeting-overview.mdx) |
+| `providerId`   | Optional. Instructs the ConfigCat Client to use a specific `ConfigCatProvider` instead of the default one. Use it if you have multiple `ConfigCatProvider`s in your code. [More about multiple providers](#using-multiple-providers).                   |
 
 ```tsx
 function ButtonComponent() {
@@ -220,6 +222,10 @@ If you specify an allowed type but it mismatches the setting kind, an error mess
 
 ## Anatomy of `useConfigCatClient()`
 
+| Parameters     | Description                                                                                                                |
+| -------------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `providerId`   | Optional. Instructs the ConfigCat Client to use a specific `ConfigCatProvider` instead of the default one. Use it if you have multiple `ConfigCatProvider`s in your code. [More about multiple providers](#using-multiple-providers).                   |
+
 This custom hook returns the ConfigCat instance from the context API. You have to wrap your parent element with `ConfigCatProvider` to ensure a `ConfigCatContextData`.
 
 ```tsx
@@ -243,6 +249,10 @@ export const FlagDetailsComponent = () => {
 
 ## Anatomy of `withConfigCatClient()`
 
+| Parameters     | Description                                                                                                                |
+| -------------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `providerId`   | Optional. Instructs the ConfigCat Client to use a specific `ConfigCatProvider` instead of the default one. Use it if you have multiple `ConfigCatProvider`s in your code. [More about multiple providers](#using-multiple-providers).                   |
+
 This is a higher-order component that can take your React component and will return the component with the injected ConfigCat related props (`WithConfigCatClientProps`).
 
 These props are the following:
@@ -977,6 +987,47 @@ If you do not want to expose the SDK key or the content of the config JSON file,
 
 Also, we recommend using [confidential targeting comparators](../targeting/targeting-rule/user-condition.mdx#confidential-text-comparators) in the Targeting Rules of those feature flags that are used in the frontend/mobile SDKs.
 
+## Using multiple providers
+
+This section explains how can you use multiple providers in one application with ReactSDK.
+
+It can be real life scenario when you arrange your feature flags into multiple configs. These configs have different sdkKeys and in your code you have to differentiate those with ConfigCatProvider's attribute called `id`.
+When you would like to use the proper instance you must specify the `id` value. The consumer side this argument's name is `providerId`.
+
+```tsx
+const CC_PROVIDERID = {
+  COMMON: "COMMON",
+  FRONTEND: "FRONTEND"};
+
+<ConfigCatProvider sdkKey={"sdkKey-01"} id={CC_PROVIDERID.COMMON}> 
+  <ConfigCatProvider sdkKey={"sdkKey-02"} id={CC_PROVIDERID.FRONTEND}>
+      ...
+      const myFeatureInCommon = useFeatureFlag("myFeatureInCommon", false, void 0, CC_PROVIDERID.COMMON)
+
+      const myFeatureInFrontEnd = useFeatureFlag("myFeatureInFrontEnd", false, void 0, CC_PROVIDERID.FRONTEND)
+      ...
+  </ConfigCatProvider>
+</ConfigCatProvider>
+```
+
+When you are using multiple providers and they are not embed in each other it is not necessary to specify the `id` attribute:
+
+```tsx
+<ConfigCatProvider sdkKey={"sdkKey-01"}>
+  ...
+  const myFeatureInCommon = useFeatureFlag("myFeatureInCommon", false);
+  ...
+</ConfigCatProvider>
+
+<ConfigCatProvider sdkKey={"sdkKey-02"}>
+  ...
+  const myFeatureInFrontEnd = useFeatureFlag("myFeatureInFrontEnd", false);
+  ...
+</ConfigCatProvider>
+```
+
+If you are using higher order components you can set `providerId` parameter in `withConfigCatClient` function.
+
 ## Sample Application
 
 - <a

website/versioned_docs/version-V1/sdk-reference/react.mdx

@@ -137,6 +137,7 @@ _ConfigCat Client_ is responsible for:
 | `sdkKey`      | **REQUIRED.** SDK Key to access your feature flags and configurations. Get it from _ConfigCat Dashboard_.                               | -                      |
 | `pollingMode` | Optional. The polling mode to use to acquire the setting values from the ConfigCat servers. [More about polling modes](#polling-modes). | `PollingMode.AutoPoll` |
 | `options`     | Optional. The options object. See the table below.                                                                                      | -                      |
+| `id`          | Optional. Instructs the ConfigCat Client to use a specific `ConfigCatProvider` instead of the default one. Use it if you have multiple `ConfigCatProvider`s in your code. [More about multiple providers](#using-multiple-providers).                                  | `undefined` (none)     |
 
 The available options depends on the chosen polling mode. However, there are some common options which can be set in the case of every polling mode:
 
@@ -182,6 +183,7 @@ The SDK supports two ways to acquire the initialized ConfigCat instance:
 | `key`          | **REQUIRED.** Setting-specific key. Set on _ConfigCat Dashboard_ for each setting.                               |
 | `defaultValue` | **REQUIRED.** This value will be returned in case of an error.                                                   |
 | `user`         | Optional, _User Object_. Essential when using Targeting. [Read more about Targeting.](../advanced/targeting.mdx) |
+| `providerId`   | Optional. Instructs the ConfigCat Client to use a specific `ConfigCatProvider` instead of the default one. Use it if you have multiple `ConfigCatProvider`s in your code. [More about multiple providers](#using-multiple-providers).          |
 
 ```tsx
 function ButtonComponent() {
@@ -226,6 +228,10 @@ If you specify an allowed type but it mismatches the setting kind, an error mess
 
 ## Anatomy of `useConfigCatClient()`
 
+| Parameters     | Description                                                                                                                |
+| -------------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `providerId`   | Optional. Instructs the ConfigCat Client to use a specific `ConfigCatProvider` instead of the default one. Use it if you have multiple `ConfigCatProvider`s in your code. [More about multiple providers](#using-multiple-providers).                   |
+
 This custom hook returns the ConfigCat instance from the context API. You have to wrap your parent element with `ConfigCatProvider` to ensure a `ConfigCatContextData`.
 
 ```tsx
@@ -249,6 +255,10 @@ export const FlagDetailsComponent = () => {
 
 ## Anatomy of `withConfigCatClient()`
 
+| Parameters     | Description                                                                                                                |
+| -------------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `providerId`   | Optional. Instructs the ConfigCat Client to use a specific `ConfigCatProvider` instead of the default one. Use it if you have multiple `ConfigCatProvider`s in your code. [More about multiple providers](#using-multiple-providers).                   |
+
 This is a higher-order component that can take your React component and will return the component with the injected ConfigCat related props (`WithConfigCatClientProps`).
 
 These props are the following:
@@ -938,6 +948,48 @@ If you do not want to expose the SDK key or the content of the config JSON file,
 
 Also, we recommend using [confidential targeting comparators](../advanced/targeting.mdx#confidential-text-comparators) in the Targeting Rules of those feature flags that are used in the frontend/mobile SDKs.
 
+## Using multiple providers
+
+To access a feature flag's value, your code needs to refer to that Config where that particular feature flag is located. This is what a ConfigCatProvider does for you; it refers to the Config by specifying the Config's sdkKey.
+
+If your code needs access to feature flags from multiple Configs, you will need multiple ConfigCatProviders - each pointing to a Config by specifying that particular Config's sdkKey.
+
+And when your code wants to access a particular feature flag, it should refer to the specific ConfigCatProvider that is associated with the Config where that particular feature flag is located. This is exactly what the providerId allows your code to do: to refer to the specific ConfigCatProvider that is associated with the feature flag it wants to access.
+
+```tsx
+const CC_PROVIDERID = {
+  COMMON: "COMMON",
+  FRONTEND: "FRONTEND"};
+
+<ConfigCatProvider sdkKey={"sdkKey-01"} id={CC_PROVIDERID.COMMON}> 
+  <ConfigCatProvider sdkKey={"sdkKey-02"} id={CC_PROVIDERID.FRONTEND}>
+      ...
+      const myFeatureInCommon = useFeatureFlag("myFeatureInCommon", false, void 0, CC_PROVIDERID.COMMON)
+
+      const myFeatureInFrontEnd = useFeatureFlag("myFeatureInFrontEnd", false, void 0, CC_PROVIDERID.FRONTEND)
+      ...
+  </ConfigCatProvider>
+</ConfigCatProvider>
+```
+
+When you are using multiple providers and they are not embed in each other it is not necessary to specify the `id` attribute:
+
+```tsx
+<ConfigCatProvider sdkKey={"sdkKey-01"}>
+  ...
+  const myFeatureInCommon = useFeatureFlag("myFeatureInCommon", false);
+  ...
+</ConfigCatProvider>
+
+<ConfigCatProvider sdkKey={"sdkKey-02"}>
+  ...
+  const myFeatureInFrontEnd = useFeatureFlag("myFeatureInFrontEnd", false);
+  ...
+</ConfigCatProvider>
+```
+
+If you are using higher order components you can set `providerId` parameter in `withConfigCatClient` function.
+
 ## Sample Application
 
 - <a