Type of Link component passed as 'component' prop

Question

I have a Function Component (with TypeScript), let's say it's called Button. I import Button as BaseButton from Material-UI, style it, add some cool fetures (I removed unnecessary code down here) and export it as my own Button. Later, when I use this exported Button somewhere in the code and want to pass Link component (imported from react-router-dom) as a 'component' prop to this button. What type should I use in ButtonProps interface? Also, should 'to' prop be specified as a string?

component/button.tsx

import * as React from 'react';
import { Button as BaseButton } from '@material-ui/core';

interface ButtonProps {
  component: ???;
  to: string;
}

export const Button: React.FC<ButtonProps> = ({ component, to }) => (
  <BaseButton component={component} to={to} />
)

.

some other place

import { Button } from 'components/button';
import { Link } from 'react-router-dom';

(...)
  <Button component={Link} to={'/'} />
(...)

component: React.ReactElement would do it. But this allows you to input ANY react component then. The prop to I would type as: H.LocationDescriptor where the import is: import * as H from "history". To restrict the component even further you could add the following type to it: component: React.Component<Link, unknown> — r3dst0rm

Hagai Harari Hagai Harari · Accepted Answer · 2020-03-06T14:46:09

< Link > tags are not visual components, but a wrappers made for adding navigation functionality, material-ui is for the opposite use therefore something like this should navigate

    export const Button: React.FC<ButtonProps> = ({ to }) => 
      <Link to={to}
        <BaseButton /> // your own styled compnent
      </Link>
     )

Type of Link component passed as 'component' prop

1 Answers