ConfigCat SDK for React Native frontend applications

https://configcat.com

This is an unofficial version of ConfigCat for react native, based version 2.0.1 of ConfigCat. The only difference between this and the JS version it depends on a modified version of ConfigCat common that replaces the node utils import with a react-native-utils import. I am not 100% convinced this was a good idea.

ConfigCat SDK for JavaScript provides easy integration for your application to ConfigCat.

ConfigCat is a feature flag and configuration management service that lets you separate releases from deployments. You can turn your features ON/OFF using ConfigCat Management Console even after they are deployed. ConfigCat lets you target specific groups of users based on region, email or any other custom user attribute.

ConfigCat is a hosted feature flag service. Manage feature toggles across frontend, backend, mobile, desktop apps. Alternative to LaunchDarkly. Management app + feature flag SDKs.

Getting Started

For SSR (Server-Side Rendering) Universal applications use configcat-node SDK.

1. Install and import package:

via NPM package:

npm i configcat-js

import * as configcat from "configcat-js";

via CDN:

<script
  type="text/javascript"
  src="https://cdn.jsdelivr.net/npm/configcat-js@latest/dist/configcat.min.js"
></script>

2. Go to Connect your application tab to get your API Key:

3. Create a ConfigCat client instance:

var configCatClient = configcat.createClient("#YOUR-API-KEY#");

We strongly recommend using the ConfigCat Client as a Singleton object in your application.

4. Get your setting value:

The Promise (async/await) way:

configCatClient
  .getValueAsync("isMyAwesomeFeatureEnabled", false)
  .then(value => {
    if (value) {
      do_the_new_thing();
    } else {
      do_the_old_thing();
    }
  });

or the Callback way:

configCatClient.getValue("isMyAwesomeFeatureEnabled", false, value => {
  if (value) {
    do_the_new_thing();
  } else {
    do_the_old_thing();
  }
});

Getting user specific setting values with Targeting

Using this feature, you will be able to get different setting values for different users in your application by passing a User Object to getValue() or getValueAsync().

Read more about Targeting here.

const userObject = { identifier: "#USER-IDENTIFIER#" };
configCatClient
  .getValueAsync("isMyAwesomeFeatureEnabled", false, userObject)
  .then(value => {
    if (value) {
      do_the_new_thing();
    } else {
      do_the_old_thing();
    }
  });

Sample/Demo apps

• Angular 2+
• React
• Pure HTML + JS

Polling Modes

The ConfigCat SDK supports 3 different polling mechanisms to acquire the setting values from ConfigCat. After latest setting values are downloaded, they are stored in the internal cache then all requests are served from there. Read more about Polling Modes and how to use them at ConfigCat Docs.

Support

If you need help how to use this SDK feel free to to contact the ConfigCat Staff on https://configcat.com. We're happy to help.

Contributing

Contributions are welcome.

About ConfigCat

• Official ConfigCat SDK's for other platforms
• Documentation
• Blog

Troubleshooting

XMLHttpRequest module not defined/found:

Since the configcat-js SDK needs to download the feature flag and setting values from ConfigCat's servers via a HTTP GET request. The SDK uses XMLHttpRequest a built in object in all browsers. This way the package size is smaller instead of using a 3rd party library. The error above can appear in cases when the configcat-js SDK is used within a SSR (Server-Side Rendering) Universal application. In these cases we recommend using configcat-node SDK.