Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/configcat/react-sdk
ConfigCat SDK for React. ConfigCat is a hosted feature flag service: https://configcat.com. Manage feature toggles across frontend, backend, mobile, desktop apps. Alternative to LaunchDarkly. Management app + feature flag SDKs.
https://github.com/configcat/react-sdk
configcat-sdk feature-flags feature-management feature-toggle react remote-config sdk
Last synced: about 2 months ago
JSON representation
ConfigCat SDK for React. ConfigCat is a hosted feature flag service: https://configcat.com. Manage feature toggles across frontend, backend, mobile, desktop apps. Alternative to LaunchDarkly. Management app + feature flag SDKs.
- Host: GitHub
- URL: https://github.com/configcat/react-sdk
- Owner: configcat
- License: mit
- Created: 2022-03-18T00:18:58.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-11-28T13:54:23.000Z (about 1 year ago)
- Last Synced: 2023-11-28T14:48:54.233Z (about 1 year ago)
- Topics: configcat-sdk, feature-flags, feature-management, feature-toggle, react, remote-config, sdk
- Language: TypeScript
- Homepage:
- Size: 4.79 MB
- Stars: 8
- Watchers: 5
- Forks: 7
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# ConfigCat SDK for React applications
https://configcat.com
ConfigCat SDK for React provides easy integration for your web application to ConfigCat.
## About
Manage features and change your software configuration using ConfigCat feature flags
, without the need to re-deploy code. A 10 minute trainable Dashboard
allows even non-technical team members to manage features directly. Deploy anytime, release when confident.
Target a specific group of users first with new ideas. Supports A/B/n testing and soft launching.
ConfigCat is a hosted feature flag service. Manage feature toggles across frontend, backend, mobile, desktop apps. Alternative to LaunchDarkly. Management app + feature flag SDKs.
[](https://github.com/configcat/react-sdk/actions/workflows/react-ci.yml)
[](https://codecov.io/gh/configcat/react-sdk)
[](https://snyk.io/test/github/configcat/react-sdk?targetFile=package.json)
[](https://sonarcloud.io/dashboard?id=configcat_react-sdk)
[](https://bundlephobia.com/result?p=configcat-react)
[](https://www.jsdelivr.com/package/npm/configcat-react)
[](https://nodei.co/npm/configcat-react/)
## Getting Started
The ConfigCat React SDK uses the Context API (requires React **16.3** or later) and Hook API (requires React **16.8** or later) to provide a better integration in your React application.
### 1. Install package:
_via NPM [package](https://npmjs.com/package/configcat-react):_
```PowerShell
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 Context API.
```js
import React from "react";
import { ConfigCatProvider } from "configcat-react";
function App() {
return (
{/* your application code */}
);
}
export default App;
```
### 4. Get your setting value:
The React hooks (`useFeatureFlag`) way:
```js
function ButtonComponent() {
const { value: isAwesomeFeatureEnabled, loading } = useFeatureFlag("isAwesomeFeatureEnabled", false);
return loading ? (
Loading...) : (
Feature flag value: {isAwesomeFeatureEnabled ? 'ON' : 'OFF'}
);
}
```
The React HOC (`WithConfigCatClientProps`) way:
```js
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 ? (
Loading...) : (
Feature flag value: {this.state.isAwesomeFeatureEnabled ? 'ON' : 'OFF'}
);
}
}
```
## Sample/Demo app
- [React](https://github.com/configcat/react-sdk/tree/main/samples/react-sdk-sample)
## 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](https://configcat.com/docs/sdk-reference/react/).
## Sensitive information handling
The frontend/mobile SDKs are running in your users' browsers/devices. The SDK is downloading a [config.json](https://configcat.com/docs/requests/) file from ConfigCat's CDN servers. The URL path for this config.json file contains your SDK key, so the SDK key and the content of your config.json file (feature flag keys, feature flag values, targeting rules, % rules) can be visible to your users.
This SDK key is read-only, it only allows downloading your config.json file, but nobody can make any changes with it in your ConfigCat account.
Suppose you don't want your SDK key or the content of your config.json file visible to your users. In that case, we recommend you use the SDK only in your backend applications and call a backend endpoint in your frontend/mobile application to evaluate the feature flags for a specific application customer.
Also, we recommend using [sensitive targeting comparators](https://configcat.com/docs/advanced/targeting/#sensitive-text-comparators) in the targeting rules of those feature flags that are used in the frontend/mobile SDKs.
## Need help?
https://configcat.com/support
## Contributing
Contributions are welcome. For more info please read the [Contribution Guideline](CONTRIBUTING.md).
## About ConfigCat
- [Official ConfigCat SDK's for other platforms](https://github.com/configcat)
- [Documentation](https://configcat.com/docs)
- [Blog](https://blog.configcat.com)