CODEWITHSUNDEEP
reactjstypescriptmaterial-ui
uladzimir
uladzimir

Reputation: 5689

Define type of the component

I play with a Link component from the 4.0.0-beta.2 - it has a field component - ability to override the root element.

I want to create a wrapper around Link - MyLink and pass a component through props: 

interface Props {
  component: ???
}

const MyLink = ({component}: Props) => {
  <MUILink component={component} ... />
}

So from type definitions I didn't get how to construct the final type of the component prop:

declare const Link: OverridableComponent<{
  props: LinkBaseProps & {
    TypographyClasses?: TypographyProps['classes'];
    underline?: 'none' | 'hover' | 'always';
  };
  defaultComponent: 'a';
  classKey: LinkClassKey;
}>;

and OverridableComponent:

/**
 * a component whose root component can be controled via a `component` prop
 *
 * Adjusts valid props based on the type of `component`
 */
export interface OverridableComponent<M extends OverridableTypeMap> {
  <C extends React.ElementType>(props: { component: C } & OverrideProps<M, C>): JSX.Element;
  (props: DefaultComponentProps<M>): JSX.Element;
}

Can somebody help me to define the type of component?

Upvotes: 0

Views: 796

Answers (1)

denieler
denieler

Reputation: 277

Looks like

interface Props {
  component: React.ElementType
}

does the trick for Link component.

Upvotes: 3

Related Questions