Skip to content

Commit

Permalink
reactSdk: multiprovider support
Browse files Browse the repository at this point in the history
  • Loading branch information
andrew-cat committed Oct 4, 2024
1 parent ccc8aba commit 2008b4c
Show file tree
Hide file tree
Showing 2 changed files with 102 additions and 0 deletions.
51 changes: 51 additions & 0 deletions website/docs/sdk-reference/react.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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
Expand All @@ -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:
Expand Down Expand Up @@ -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
Expand Down
51 changes: 51 additions & 0 deletions website/versioned_docs/version-V1/sdk-reference/react.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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. 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:

Expand Down Expand Up @@ -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, Identifier of `ConfigCatProvider`. [More about multiple providers](#using-multiple-providers). |

```tsx
function ButtonComponent() {
Expand Down Expand Up @@ -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, 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
Expand All @@ -249,6 +255,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:
Expand Down Expand Up @@ -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"};

<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
Expand Down

0 comments on commit 2008b4c

Please sign in to comment.