From 2008b4c4211b08019b9ac6e0eb02f8f39cb902ac Mon Sep 17 00:00:00 2001 From: andrew-cat Date: Wed, 2 Oct 2024 23:58:31 +0200 Subject: [PATCH 01/14] reactSdk: multiprovider support --- website/docs/sdk-reference/react.mdx | 51 +++++++++++++++++++ .../version-V1/sdk-reference/react.mdx | 51 +++++++++++++++++++ 2 files changed, 102 insertions(+) diff --git a/website/docs/sdk-reference/react.mdx b/website/docs/sdk-reference/react.mdx index d57688f6..bc50d4f5 100644 --- a/website/docs/sdk-reference/react.mdx +++ b/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. Identifier of `ConfigCatProvider`. [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, Identifier of `ConfigCatProvider`. [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, Identifier of `ConfigCatProvider`. [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, Identifier of `ConfigCatProvider`. [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"}; + + + + ... + const myFeatureInCommon = useFeatureFlag("myFeatureInCommon", false, void 0, CC_PROVIDERID.COMMON) + + const myFeatureInFrontEnd = useFeatureFlag("myFeatureInFrontEnd", false, void 0, CC_PROVIDERID.FRONTEND) + ... + + +``` + +When you are using multiple providers and they are not embed in each other it is not necessary to specify the `id` attribute: + +```tsx + + ... + const myFeatureInCommon = useFeatureFlag("myFeatureInCommon", false); + ... + + + + ... + const myFeatureInFrontEnd = useFeatureFlag("myFeatureInFrontEnd", false); + ... + +``` + +If you are using higher order components you can set `providerId` parameter in `withConfigCatClient` function. + ## Sample Application - { ## Anatomy of `withConfigCatClient()` +| Parameters | Description | +| -------------- | -------------------------------------------------------------------------------------------------------------------------- | +| `providerId` | Optional, Identifier of `ConfigCatProvider`. [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,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](../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 + +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"}; + + + + ... + const myFeatureInCommon = useFeatureFlag("myFeatureInCommon", false, void 0, CC_PROVIDERID.COMMON) + + const myFeatureInFrontEnd = useFeatureFlag("myFeatureInFrontEnd", false, void 0, CC_PROVIDERID.FRONTEND) + ... + + +``` + +When you are using multiple providers and they are not embed in each other it is not necessary to specify the `id` attribute: + +```tsx + + ... + const myFeatureInCommon = useFeatureFlag("myFeatureInCommon", false); + ... + + + + ... + const myFeatureInFrontEnd = useFeatureFlag("myFeatureInFrontEnd", false); + ... + +``` + +If you are using higher order components you can set `providerId` parameter in `withConfigCatClient` function. + ## Sample Application - Date: Mon, 7 Oct 2024 11:38:33 +0200 Subject: [PATCH 02/14] Update website/docs/sdk-reference/react.mdx Co-authored-by: Zoltan David <54935463+zoltan-david@users.noreply.github.com> --- website/docs/sdk-reference/react.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/docs/sdk-reference/react.mdx b/website/docs/sdk-reference/react.mdx index bc50d4f5..5caa0bfe 100644 --- a/website/docs/sdk-reference/react.mdx +++ b/website/docs/sdk-reference/react.mdx @@ -131,7 +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. Identifier of `ConfigCatProvider`. [More about multiple providers](#using-multiple-providers). | `undefined` (none) | +| `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: From 24be94349c548002e871facab31a82275f26046d Mon Sep 17 00:00:00 2001 From: "Endre T." Date: Mon, 7 Oct 2024 11:38:41 +0200 Subject: [PATCH 03/14] Update website/docs/sdk-reference/react.mdx Co-authored-by: Zoltan David <54935463+zoltan-david@users.noreply.github.com> --- website/docs/sdk-reference/react.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/docs/sdk-reference/react.mdx b/website/docs/sdk-reference/react.mdx index 5caa0bfe..9d3e2b8b 100644 --- a/website/docs/sdk-reference/react.mdx +++ b/website/docs/sdk-reference/react.mdx @@ -251,7 +251,7 @@ export const FlagDetailsComponent = () => { | Parameters | Description | | -------------- | -------------------------------------------------------------------------------------------------------------------------- | -| `providerId` | Optional, Identifier of `ConfigCatProvider`. [More about multiple providers](#using-multiple-providers). | +| `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`). From bf6f03ba179c0a458ec69ba584d671053f3a60cb Mon Sep 17 00:00:00 2001 From: "Endre T." Date: Mon, 7 Oct 2024 11:39:15 +0200 Subject: [PATCH 04/14] Update website/docs/sdk-reference/react.mdx Co-authored-by: Zoltan David <54935463+zoltan-david@users.noreply.github.com> --- website/docs/sdk-reference/react.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/docs/sdk-reference/react.mdx b/website/docs/sdk-reference/react.mdx index 9d3e2b8b..aafc9ed8 100644 --- a/website/docs/sdk-reference/react.mdx +++ b/website/docs/sdk-reference/react.mdx @@ -177,7 +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, Identifier of `ConfigCatProvider`. [More about multiple providers](#using-multiple-providers). | +| `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() { From fa1dc34e352afcaa41fdb10dcb3a6d630d50851c Mon Sep 17 00:00:00 2001 From: "Endre T." Date: Mon, 7 Oct 2024 11:39:30 +0200 Subject: [PATCH 05/14] Update website/versioned_docs/version-V1/sdk-reference/react.mdx Co-authored-by: Zoltan David <54935463+zoltan-david@users.noreply.github.com> --- website/versioned_docs/version-V1/sdk-reference/react.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/versioned_docs/version-V1/sdk-reference/react.mdx b/website/versioned_docs/version-V1/sdk-reference/react.mdx index 66a09e88..f2c11efb 100644 --- a/website/versioned_docs/version-V1/sdk-reference/react.mdx +++ b/website/versioned_docs/version-V1/sdk-reference/react.mdx @@ -137,7 +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. Identifier of `ConfigCatProvider`. [More about multiple providers](#using-multiple-providers). | `undefined` (none) | +| `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: From fb1319ed4874abf0a6f517a5988c153947ba6498 Mon Sep 17 00:00:00 2001 From: "Endre T." Date: Mon, 7 Oct 2024 11:39:36 +0200 Subject: [PATCH 06/14] Update website/versioned_docs/version-V1/sdk-reference/react.mdx Co-authored-by: Zoltan David <54935463+zoltan-david@users.noreply.github.com> --- website/versioned_docs/version-V1/sdk-reference/react.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/versioned_docs/version-V1/sdk-reference/react.mdx b/website/versioned_docs/version-V1/sdk-reference/react.mdx index f2c11efb..6bf5e587 100644 --- a/website/versioned_docs/version-V1/sdk-reference/react.mdx +++ b/website/versioned_docs/version-V1/sdk-reference/react.mdx @@ -257,7 +257,7 @@ export const FlagDetailsComponent = () => { | Parameters | Description | | -------------- | -------------------------------------------------------------------------------------------------------------------------- | -| `providerId` | Optional, Identifier of `ConfigCatProvider`. [More about multiple providers](#using-multiple-providers). | +| `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`). From a93a90a4b2621e0997e31158d0a9748a2bb8dc08 Mon Sep 17 00:00:00 2001 From: "Endre T." Date: Mon, 7 Oct 2024 11:39:44 +0200 Subject: [PATCH 07/14] Update website/versioned_docs/version-V1/sdk-reference/react.mdx Co-authored-by: Zoltan David <54935463+zoltan-david@users.noreply.github.com> --- website/versioned_docs/version-V1/sdk-reference/react.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/versioned_docs/version-V1/sdk-reference/react.mdx b/website/versioned_docs/version-V1/sdk-reference/react.mdx index 6bf5e587..dbb1c176 100644 --- a/website/versioned_docs/version-V1/sdk-reference/react.mdx +++ b/website/versioned_docs/version-V1/sdk-reference/react.mdx @@ -230,7 +230,7 @@ If you specify an allowed type but it mismatches the setting kind, an error mess | Parameters | Description | | -------------- | -------------------------------------------------------------------------------------------------------------------------- | -| `providerId` | Optional, Identifier of `ConfigCatProvider`. [More about multiple providers](#using-multiple-providers). | +| `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`. From d91d3b035fb35fdb404674f17b053cfaf82541c4 Mon Sep 17 00:00:00 2001 From: "Endre T." Date: Mon, 7 Oct 2024 11:39:54 +0200 Subject: [PATCH 08/14] Update website/versioned_docs/version-V1/sdk-reference/react.mdx Co-authored-by: Zoltan David <54935463+zoltan-david@users.noreply.github.com> --- website/versioned_docs/version-V1/sdk-reference/react.mdx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/website/versioned_docs/version-V1/sdk-reference/react.mdx b/website/versioned_docs/version-V1/sdk-reference/react.mdx index dbb1c176..f3170a52 100644 --- a/website/versioned_docs/version-V1/sdk-reference/react.mdx +++ b/website/versioned_docs/version-V1/sdk-reference/react.mdx @@ -950,10 +950,11 @@ Also, we recommend using [confidential targeting comparators](../advanced/target ## Using multiple providers -This section explains how can you use multiple providers in one application with ReactSDK. +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. -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`. +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 = { From c1ecfc185f023764c079ee8ad925206d3aa0dd67 Mon Sep 17 00:00:00 2001 From: "Endre T." Date: Mon, 7 Oct 2024 11:40:00 +0200 Subject: [PATCH 09/14] Update website/versioned_docs/version-V1/sdk-reference/react.mdx Co-authored-by: Zoltan David <54935463+zoltan-david@users.noreply.github.com> --- website/versioned_docs/version-V1/sdk-reference/react.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/versioned_docs/version-V1/sdk-reference/react.mdx b/website/versioned_docs/version-V1/sdk-reference/react.mdx index f3170a52..599122cf 100644 --- a/website/versioned_docs/version-V1/sdk-reference/react.mdx +++ b/website/versioned_docs/version-V1/sdk-reference/react.mdx @@ -183,7 +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, Identifier of `ConfigCatProvider`. [More about multiple providers](#using-multiple-providers). | +| `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() { From d659950694af1828c51b819d6a74f1f326d410c9 Mon Sep 17 00:00:00 2001 From: "Endre T." Date: Mon, 7 Oct 2024 11:40:08 +0200 Subject: [PATCH 10/14] Update website/docs/sdk-reference/react.mdx Co-authored-by: Zoltan David <54935463+zoltan-david@users.noreply.github.com> --- website/docs/sdk-reference/react.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/docs/sdk-reference/react.mdx b/website/docs/sdk-reference/react.mdx index aafc9ed8..a3b5ae61 100644 --- a/website/docs/sdk-reference/react.mdx +++ b/website/docs/sdk-reference/react.mdx @@ -224,7 +224,7 @@ If you specify an allowed type but it mismatches the setting kind, an error mess | Parameters | Description | | -------------- | -------------------------------------------------------------------------------------------------------------------------- | -| `providerId` | Optional, Identifier of `ConfigCatProvider`. [More about multiple providers](#using-multiple-providers). | +| `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`. From 4a922dfab22bff04d86e23f75143cd97225755ce Mon Sep 17 00:00:00 2001 From: andrew-cat Date: Wed, 9 Oct 2024 21:37:46 +0200 Subject: [PATCH 11/14] fixup! Update website/docs/sdk-reference/react.mdx --- website/docs/sdk-reference/react.mdx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/website/docs/sdk-reference/react.mdx b/website/docs/sdk-reference/react.mdx index a3b5ae61..82daf9fe 100644 --- a/website/docs/sdk-reference/react.mdx +++ b/website/docs/sdk-reference/react.mdx @@ -989,10 +989,11 @@ Also, we recommend using [confidential targeting comparators](../targeting/targe ## Using multiple providers -This section explains how can you use multiple providers in one application with ReactSDK. +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. -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`. +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 = { From 1d2587fb6d6faed060e5d0448a797badab8546ec Mon Sep 17 00:00:00 2001 From: andrew-cat Date: Wed, 16 Oct 2024 12:32:22 +0200 Subject: [PATCH 12/14] fixup! Update website/docs/sdk-reference/react.mdx --- website/docs/sdk-reference/react.mdx | 29 ++++++++++--------- .../version-V1/sdk-reference/react.mdx | 29 ++++++++++--------- 2 files changed, 32 insertions(+), 26 deletions(-) diff --git a/website/docs/sdk-reference/react.mdx b/website/docs/sdk-reference/react.mdx index 82daf9fe..272fcf24 100644 --- a/website/docs/sdk-reference/react.mdx +++ b/website/docs/sdk-reference/react.mdx @@ -989,38 +989,41 @@ Also, we recommend using [confidential targeting comparators](../targeting/targe ## 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. +`ConfigCatProvider` allows you to access the feature flags of a specific Config, identified by the `sdkKey` parameter. (More precisely, `sdkKey` identifies a combination of a Config and an Environment.) -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. +However, in some cases, you may want to access feature flags from multiple Configs in your application. To do this, you will need to use multiple `ConfigCatProvider`s — each associated with a specific Config by providing the corresponding `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. +It's also important to keep in mind that `useFeatureFlag` calls will default to using the nearest `ConfigCatProvider`, similar to how React's [useContext](https://react.dev/learn/passing-data-deeply-with-context) works. + +So, when working with multiple providers, it may be necessary to differentiate between them. You can achieve this by assigning a unique `id` to each provider. (Note that the absence of `id` also acts as a unique identifier.) + +Then, by passing the provider id in your `useFeatureFlag`, `useConfigCatClient`, or similar calls, you can explicitly specify which provider (i.e. which `sdkKey`, and ultimately which Config and Environment) to use. ```tsx -const CC_PROVIDERID = { - COMMON: "COMMON", - FRONTEND: "FRONTEND"}; +const CC_PROVIDER_ID_COMMON = "COMMON"; +const CC_PROVIDER_ID_FRONTEND = "FRONTEND"; - - + + ... - const myFeatureInCommon = useFeatureFlag("myFeatureInCommon", false, void 0, CC_PROVIDERID.COMMON) + const myFeatureInCommon = useFeatureFlag("myFeatureInCommon", false, void 0, CC_PROVIDER_ID_COMMON) - const myFeatureInFrontEnd = useFeatureFlag("myFeatureInFrontEnd", false, void 0, CC_PROVIDERID.FRONTEND) + const myFeatureInFrontEnd = useFeatureFlag("myFeatureInFrontEnd", false, void 0, CC_PROVIDER_ID_FRONTEND) ... ``` -When you are using multiple providers and they are not embed in each other it is not necessary to specify the `id` attribute: +When you are using multiple providers and they are not nested, it is not necessary to specify the `id` attribute: ```tsx - + ... const myFeatureInCommon = useFeatureFlag("myFeatureInCommon", false); ... - + ... const myFeatureInFrontEnd = useFeatureFlag("myFeatureInFrontEnd", false); ... diff --git a/website/versioned_docs/version-V1/sdk-reference/react.mdx b/website/versioned_docs/version-V1/sdk-reference/react.mdx index 599122cf..731ebaed 100644 --- a/website/versioned_docs/version-V1/sdk-reference/react.mdx +++ b/website/versioned_docs/version-V1/sdk-reference/react.mdx @@ -950,38 +950,41 @@ Also, we recommend using [confidential targeting comparators](../advanced/target ## 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. +`ConfigCatProvider` allows you to access the feature flags of a specific Config, identified by the `sdkKey` parameter. (More precisely, `sdkKey` identifies a combination of a Config and an Environment.) -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. +However, in some cases, you may want to access feature flags from multiple Configs in your application. To do this, you will need to use multiple `ConfigCatProvider`s — each associated with a specific Config by providing the corresponding `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. +It's also important to keep in mind that `useFeatureFlag` calls will default to using the nearest `ConfigCatProvider`, similar to how React's [useContext](https://react.dev/learn/passing-data-deeply-with-context) works. + +So, when working with multiple providers, it may be necessary to differentiate between them. You can achieve this by assigning a unique `id` to each provider. (Note that the absence of `id` also acts as a unique identifier.) + +Then, by passing the provider id in your `useFeatureFlag`, `useConfigCatClient`, or similar calls, you can explicitly specify which provider (i.e. which `sdkKey`, and ultimately which Config and Environment) to use. ```tsx -const CC_PROVIDERID = { - COMMON: "COMMON", - FRONTEND: "FRONTEND"}; +const CC_PROVIDER_ID_COMMON = "COMMON"; +const CC_PROVIDER_ID_FRONTEND = "FRONTEND"; - - + + ... - const myFeatureInCommon = useFeatureFlag("myFeatureInCommon", false, void 0, CC_PROVIDERID.COMMON) + const myFeatureInCommon = useFeatureFlag("myFeatureInCommon", false, void 0, CC_PROVIDER_ID_COMMON) - const myFeatureInFrontEnd = useFeatureFlag("myFeatureInFrontEnd", false, void 0, CC_PROVIDERID.FRONTEND) + const myFeatureInFrontEnd = useFeatureFlag("myFeatureInFrontEnd", false, void 0, CC_PROVIDER_ID_FRONTEND) ... ``` -When you are using multiple providers and they are not embed in each other it is not necessary to specify the `id` attribute: +When you are using multiple providers and they are not nested, it is not necessary to specify the `id` attribute: ```tsx - + ... const myFeatureInCommon = useFeatureFlag("myFeatureInCommon", false); ... - + ... const myFeatureInFrontEnd = useFeatureFlag("myFeatureInFrontEnd", false); ... From 065829148295a6f71cf68adaae13d1eba9153495 Mon Sep 17 00:00:00 2001 From: "Endre T." Date: Wed, 16 Oct 2024 14:36:38 +0200 Subject: [PATCH 13/14] Update website/docs/sdk-reference/react.mdx Co-authored-by: adams85 <31276480+adams85@users.noreply.github.com> --- website/docs/sdk-reference/react.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/docs/sdk-reference/react.mdx b/website/docs/sdk-reference/react.mdx index 272fcf24..c89b15b8 100644 --- a/website/docs/sdk-reference/react.mdx +++ b/website/docs/sdk-reference/react.mdx @@ -1030,7 +1030,7 @@ When you are using multiple providers and they are not nested, it is not necessa ``` -If you are using higher order components you can set `providerId` parameter in `withConfigCatClient` function. +If you are using higher order components, you can set the `providerId` parameter in the `withConfigCatClient` function. ## Sample Application From 3a5a9369bbe42b8205ba54bb61fb595cd2a82d5c Mon Sep 17 00:00:00 2001 From: andrew-cat Date: Wed, 16 Oct 2024 14:43:28 +0200 Subject: [PATCH 14/14] fixup! Update website/docs/sdk-reference/react.mdx --- .../version-V1/sdk-reference/react.mdx | 55 ------------------- 1 file changed, 55 deletions(-) diff --git a/website/versioned_docs/version-V1/sdk-reference/react.mdx b/website/versioned_docs/version-V1/sdk-reference/react.mdx index 731ebaed..c7b05bac 100644 --- a/website/versioned_docs/version-V1/sdk-reference/react.mdx +++ b/website/versioned_docs/version-V1/sdk-reference/react.mdx @@ -137,7 +137,6 @@ _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: @@ -183,7 +182,6 @@ 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() { @@ -228,10 +226,6 @@ 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 @@ -255,10 +249,6 @@ 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: @@ -948,51 +938,6 @@ 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 - -`ConfigCatProvider` allows you to access the feature flags of a specific Config, identified by the `sdkKey` parameter. (More precisely, `sdkKey` identifies a combination of a Config and an Environment.) - -However, in some cases, you may want to access feature flags from multiple Configs in your application. To do this, you will need to use multiple `ConfigCatProvider`s — each associated with a specific Config by providing the corresponding `sdkKey`. - -It's also important to keep in mind that `useFeatureFlag` calls will default to using the nearest `ConfigCatProvider`, similar to how React's [useContext](https://react.dev/learn/passing-data-deeply-with-context) works. - -So, when working with multiple providers, it may be necessary to differentiate between them. You can achieve this by assigning a unique `id` to each provider. (Note that the absence of `id` also acts as a unique identifier.) - -Then, by passing the provider id in your `useFeatureFlag`, `useConfigCatClient`, or similar calls, you can explicitly specify which provider (i.e. which `sdkKey`, and ultimately which Config and Environment) to use. - -```tsx -const CC_PROVIDER_ID_COMMON = "COMMON"; -const CC_PROVIDER_ID_FRONTEND = "FRONTEND"; - - - - ... - const myFeatureInCommon = useFeatureFlag("myFeatureInCommon", false, void 0, CC_PROVIDER_ID_COMMON) - - const myFeatureInFrontEnd = useFeatureFlag("myFeatureInFrontEnd", false, void 0, CC_PROVIDER_ID_FRONTEND) - ... - - -``` - -When you are using multiple providers and they are not nested, it is not necessary to specify the `id` attribute: - -```tsx - - ... - const myFeatureInCommon = useFeatureFlag("myFeatureInCommon", false); - ... - - - - ... - const myFeatureInFrontEnd = useFeatureFlag("myFeatureInFrontEnd", false); - ... - -``` - -If you are using higher order components you can set `providerId` parameter in `withConfigCatClient` function. - ## Sample Application -