yarn add ...
const config = [{
name: 'Light Mode',
id: 'lightMode',
defaultValue: false,
}, {
name: 'Show icon',
id: 'showIcon',
options: [{
name: 'Right',
value: 'flex-start',
}, {
name: 'Center',
value: 'center',
}, {
name: 'Left',
value: 'flex-end',
}],
defaultValue: 'flex-start'
}
]
property | type | required | description |
---|---|---|---|
name | string | Yes | Flag's name. It will be written on Flag Panel |
id | string | Yes | Unique property for flag |
defaultValue | string | No | You can use it when you need default value for flag |
options | array | No | Array of object, which holds options' names and values |
Wrap your root component with FeatureFlagProvider
and pass your config to it with the config
prop.
import { FeatureFlagProvider } from './FeatureFlag';
ReactDOM.render(
<FeatureFlagProvider config={featureConfig}>
<App />
</FeatureFlagProvider>,
document.getElementById('root')
);
property | type | required | description |
---|---|---|---|
config | object | No | Array of config item |
isPanelVisible | bool | No | Set false to hide feature panel |
Use useFeatureFlag
hook for reaching flag value from React Component
. You can pass it string(flag id
) or array of string(flag id
).
import { useFeatureFlag } from './FeatureFlag';
function App() {
const showIcon = useFeatureFlag('showIcon');
const [lightMode] = useFeatureFlag(['lightMode']);
return (
<div className="App">
<header className={`App-header${lightMode ? ' light' : ''}`}>
{showIcon && <img src={logo} className="App-logo" alt="logo" style={{ alignSelf: showIcon }} />}
</header>
</div>
);
}
Use getFeatureFlag
function for reaching flag value wherever you want. You can pass it string(flag id
) or array of string(flag id
).
import { getFeatureFlag } from './FeatureFlag';
const calculate = () => {
return getFeatureFlag('coefficient') * value;
}
If the flag value is changed from Featuer Flag Panel
. Its value will be written to your localstorage. So It wont be reset after refreshing the browser.