Exposed FlexProps so it can be used to type components that wrap <Flex>

[giulioz]

Can you provide an use case?

[saitonakamura]

I have a component that draws a flex list of items and I want to allow to override or define certain properties (or all of them) on this component that has Flex as a root and I don't want to copy paste the typings of this props

For instance

export const List = ({
  items,
  size = [12, 7, 0.1],
  ...rest
}: {
  items: Type[];
} & Pick<FlexProps, 'position' | 'size'>) => (
  <Flex {...rest} size={size} flexDirection="column" flexWrap="wrap">
    {items.map((b) => (...))}
  </Flex>
);

Or it could be something like Partial<FlexProps>

Currently it still can be achieved through typescript debauchery, but having a FlexProps would be better

type ExtractProps<T extends (props: any) => JSX.Element> = T extends (
  props: infer R
) => JSX.Element
  ? R
  : never;

type FlexProps = ExtractProps<typeof Flex>

As a side note, library's already exposing R3FlexProps

[giulioz]

Yeah you are right, LGTM then :)