Last active
October 19, 2023 02:17
-
-
Save olafwrieden/a288fd036e2b3c880cfcf4ee41b83214 to your computer and use it in GitHub Desktop.
React Hooks + Azure App Configuration Feature Flags
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const Landing = () => { | |
| const { config: alertMessage } = useConfiguration('Landing:Alert'); // The config key from App Config | |
| const { enabled: showLandingAlert } = useFeatureFlag('ShowLandingAlert'); // The feature flag key from App Config | |
| const showAlert = showLandingAlert && alertMessage.toString().trim().length; | |
| return ( | |
| <> | |
| {showAlert && <TopAlert color="success">{alertMessage}</TopAlert>} | |
| <Navigation /> | |
| <Hero /> | |
| .... | |
| </> | |
| ); | |
| }; | |
| export default Landing; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { AppConfigurationClient } from '@azure/app-configuration'; | |
| import { useMemo, useState } from 'react'; | |
| const client = new AppConfigurationClient('YOUR_CONNECTION_STRING'); // TODO: Add Connection String | |
| /** | |
| * Retrieves the specified feature flag from Azure App Configuration. | |
| * @param {string} flagKey App Config Feature Flag key | |
| * @returns the feature flag for the specified key | |
| */ | |
| const useFeatureFlag = (flagKey = '') => { | |
| const [enabled, setEnabled] = useState(false); | |
| useMemo(async () => { | |
| if (!flagKey || !flagKey.toString().trim().length) { | |
| console.error('A feature flag key must be supplied.'); | |
| } else { | |
| try { | |
| const result = await client.getConfigurationSetting({ | |
| key: `.appconfig.featureflag/${flagKey.toString().trim()}`, | |
| }); | |
| if (result && typeof result === 'object') { | |
| console.debug('Feature: ' + JSON.parse(result.value).id, JSON.parse(result.value).enabled); | |
| setEnabled(JSON.parse(result.value).enabled); | |
| } | |
| } catch (error) { | |
| console.error(error); | |
| } | |
| } | |
| }, [flagKey]); | |
| return { enabled }; | |
| }; | |
| /** | |
| * Retrieves the specified configuration from Azure App Configuration. | |
| * @param {string} configKey App Config Key | |
| * @returns the configuration for the specified key | |
| */ | |
| const useConfiguration = (configKey = '') => { | |
| const [config, setConfig] = useState(''); | |
| useMemo(async () => { | |
| if (!configKey || !configKey.toString().trim().length) { | |
| console.error('A config key must be supplied.'); | |
| } else { | |
| try { | |
| const result = await client.getConfigurationSetting({ key: configKey.toString().trim() }); | |
| if (result) { | |
| console.debug('Config: ' + result.key, result.value); | |
| setConfig(result.value); | |
| } | |
| } catch (error) { | |
| console.error(error); | |
| } | |
| } | |
| }, [configKey]); | |
| return { config }; | |
| }; | |
| export { useFeatureFlag, useConfiguration }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment