Overridable React Component Example

OverridableButton.tsx

import * as React from "react";
import "./styles.css";

type OverrideComponentProps<C extends React.ElementType, P = {}> = P &
  Omit<React.ComponentProps<C>, keyof P>;

type OverridableComponentProps<C extends React.ElementType, P = {}> = {
  component?: C;
} & OverrideComponentProps<C, P>;

type OverridableComponent<D extends React.ElementType, P = {}> = <
  C extends React.ElementType = D
>(
  props: OverridableComponentProps<C, P>
) => JSX.Element;

interface ButtonProps {
  className?: string;
  style?: React.CSSProperties;
}

const Button: OverridableComponent<"button", ButtonProps> = (props) => {
  const { component: Component = "button", ...rest } = props;
  return <Component {...rest} />;
};

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Button type="submit">Button</Button>

      <Button component="a" href="#" target="_blank">
        Link
      </Button>
    </div>
  );
}