flag
flag copied to clipboard
Proper typing of components that use flags as parameters
I want to have a simple helper compent, that evaluates a flag and then either shows or hides its children, something like:
<OptionalContent flag={["hideFeature"]}><HideThisComponent /></OptionalContent>
How can I properly type these props? I tried out several variants of
type OptionalContentProps =
| {
flag: KeyPathString<MyFlags>[];
show: true;
hide?: false | undefined | null;
}
| {
flag: KeyPathString<MyFlags>[];
show?: false | undefined;
hide: true;
};
but can't get this to work: Inside the component, I use useFlag(flag) to evaluate the flag, so I basically need to reproduce the type that useFlag is using.
And the types used inside the lib like KeyPathString are not exported, so I had to re-write them: I am probably doing something basic wrong here, so any hint is appreciated!