A library for handling features in large-scale React apps
npm install feature-gateEasily render or hide pieces of UI relative to the user's feature flags.
javascript
import { FeatureGateProvider } from 'feature-gate';// define or get from api features and freeze them
const features = Object.freeze({
feature1: 'default',
feature2: 'extended',
ABtest: 'A',
});
function MyApp() {
const featureFlags = { // get from user api
feature1: 'default',
feature2: 'none',
ABtest: 'B',
};
return (
)
}
`
then anywhere in the app use names of features defined in the features mapjavascript
import { FeatureGate } from 'feature-gate';
Component available for user with feature1 enabled
`
javascript
import { FeatureSwitch } from 'feature-gate';B test
`
or use hookjavascript
import { useFeature } from 'feature-gate';
...
const { enabled: showFeature1 } = useFeature('feature1');
// feature status for the current user
...
{showFeature1 &&
$3
A validator function can be provided
javascript
import { FeatureGateProvider } from 'feature-gate';
...// define or get from api rules and freeze them
const features = Object.freeze({
feature1: 'default',
ABtest: 'A',
});
function validator({ featureFlags, features, name }) {
// default validator implementation
const feature = featureFlags[name];
if (!feature) return false;
return features[name] === feature;
}
function MyApp() {
const featureFlags = { // get from user api
feature1: 'off',
ABtest: 'A',
};
return (
)
}
``