ConfigCat SDK for React applications

ConfigCat SDK for React provides easy integration for your web application to ConfigCat.

Getting started

The SDK supports the Context API (requires React 16.3 or later) and the Hook API (requires React 16.8 or later) to provide a better integration for your React applications.

1. Install package:

via NPM

Install the NPM package:

npm i configcat-react

2. Go to the ConfigCat Dashboard to get your SDK Key:

3. Import and initialize ConfigCatProvider:

In most cases, you should wrap your root component with ConfigCatProvider to access ConfigCat features in child components with the Context API.

import React from "react";
import { ConfigCatProvider } from "configcat-react";

function App() {
  return (
    <ConfigCatProvider sdkKey="#YOUR_SDK_KEY#">
      {/* your application code */}
    </ConfigCatProvider>
  );
}

export default App;

4. Get your setting value:

The React hooks (useFeatureFlag) way:

function ButtonComponent() {
  const { value: isAwesomeFeatureEnabled, loading } = useFeatureFlag("isAwesomeFeatureEnabled", false);

  return loading ? (<div>Loading...</div>) : (
    <div>Feature flag value: {isAwesomeFeatureEnabled ? 'ON' : 'OFF'}</div>
  );
}

The React HOC (WithConfigCatClientProps) way:

class TestHOCComponent extends React.Component<
  WithConfigCatClientProps,
  { isAwesomeFeatureEnabled: string }
> {
  constructor(props: WithConfigCatClientProps) {
    super(props);

    this.state = { isAwesomeFeatureEnabled: false, loading: true };
  }

  componentDidMount() {
    this.evaluateFeatureFlag();
  }

  componentDidUpdate(prevProps: any) {
    // To achieve hot reload on config.json updates.
    if (prevProps?.lastUpdated !== this.props.lastUpdated) {
      this.evaluateFeatureFlag();
    }
  }

  evaluateFeatureFlag(){
    this.props
      .getValue("isAwesomeFeatureEnabled", false)
      .then((v: boolean) => this.setState({ isAwesomeFeatureEnabled: v, loading: false }));
  }
  
  render() {
    return loading ? (<div>Loading...</div>) : (
      <div>Feature flag value: {this.state.isAwesomeFeatureEnabled ? 'ON' : 'OFF'}</div>
    );
  }
}

Sample/demo app

• React

Polling modes

The ConfigCat SDK supports 3 different polling strategies to fetch feature flags and settings from the ConfigCat CDN. Once the latest data is downloaded, it is stored in the cache, then the SDK uses the cached data to evaluate feature flags and settings. Read more about polling modes and how to use them at ConfigCat Docs.

Sensitive information handling

Frontend/mobile SDKs run in your users' browsers/devices. They download a config JSON file from ConfigCat's CDN servers. Since the SDK Key is included in the URL path of this file, your users can access both the SDK Key and the contents of the config JSON (including feature flag keys, feature flag values, targeting rules, percentage options, etc.)

However, the SDK Key provides read-only access: it only allows downloading your config JSON file, but it cannot be used to modify the corresponding config in your ConfigCat account.

If you want to prevent your users from accessing your SDK Key and the contents of your config JSON file, we recommend using the SDK in your backend services only. You can then provide a secure API endpoint for your frontend/mobile applications to evaluate feature flags and settings for your users.

Also, we suggest using confidential text comparators in the targeting rules of the feature flags and settings that are used in frontend/mobile SDKs.

Need help?

https://configcat.com/support

Contributing

Contributions are welcome. For more info please read the Contribution Guideline.

About 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 Dashboard 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.

• Official ConfigCat SDKs for other platforms
• Documentation
• Blog