1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-06 00:07:44 +01:00
unleash.unleash/frontend/src/hooks/useUiFlag.ts
Tymoteusz Czech a9ac81a089
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

10 lines
289 B
TypeScript

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;
};