Extending HTML elements in React and TypeScript while preserving props

Question

I just can\'t wrap my head around this I guess, I\'ve tried probably half a dozen times and always resort to any... Is there a legitimate way to start with an HTML

Answer 1

I always like to do it this way:

import React from 'react';

interface ButtonProps extends React.ButtonHTMLAttributes {
  title: string;
  showIcon: boolean;
}

const Button: React.FC = ({ title, showIcon, ...props }) => {
  return (
    
      {title}
      {showIcon && }
    
  );
};

Then you can do:

 {}} {/* You have access to the  props */}
/>