unleash.unleash/frontend/src/hooks/useUiFlag.ts

import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';

type flags = ReturnType<typeof useUiConfig>['uiConfig']['flags'];

export const useUiFlag = <K extends keyof flags>(flag: K) => {
    const { uiConfig } = useUiConfig();

    return uiConfig?.flags?.[flag] || false;
};
feat: useUiFlag shorthand hook (#4566) ## About the changes Instead of this: ```ts const { uiConfig } = useUiConfig(); const myFlag = Boolean(uiConfig?.flags?.myFlag) ``` we can have this: ```ts const myFlag = useUiFlag("myFlag") ``` With the same type safety, less verbose and more purposeful code. ### Important files - `frontend/src/hooks/useUiFlag.ts` ## Discussion points Can we in the future share flags between frontend and backend? Right now adding a new flag has to be done in 4 different places (backend flag keys list, backend flags defaults config, backend experimental server options, frontend type). Most ergonomic option is to pull config directly from Unleash. Issue, based on previous user feedback: https://github.com/Unleash/unleash/issues/4565 Internal feature request document: [docs.google.com/document/d/1Sx0q...](https://docs.google.com/document/d/1Sx0qKZXUVUCjuY5F4MOh1ieOM1A2_jE58zEA7jaM_1g/edit?usp=sharing) 2023-09-11 10:01:20 +02:00			`import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';`

			`type flags = ReturnType<typeof useUiConfig>['uiConfig']['flags'];`

			`export const useUiFlag = <K extends keyof flags>(flag: K) => {`
			`const { uiConfig } = useUiConfig();`

			`return uiConfig?.flags?.[flag] \|\| false;`
			`};`