I'm looking to create a uniquely customized button in React using TypeScript. Essentially, I want to build upon the existing properties of the <button> tag. Below is a simplified version of what I have so far:
export default class Button extends React.Component<Props, State> {
public render() {
const { size, ...buttonProps } = this.props;
return (
<button
{...buttonProps}
className={classnames({
[styles.small]: size === 'small',
[styles.medium]: size === 'medium',
[styles.large]: size === 'large',
})}
/>
);
}
}
My challenge lies in finding a way to inherit all the native HTMLButton elements' proptypes within an interface. My initial attempt looks something like this:
interface Props extends <(Something)> {
size: 'small' | 'medium' | 'large',
}
Have you ever had experience extending native HTML element properties in TypeScript before?