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 encountered the same issue today and here is how I fixed it:

ReactButtonProps.ts

import {
  ButtonHTMLAttributes,
  DetailedHTMLProps,
} from 'react';

/**
 * React HTML "Button" element properties.
 * Meant to be a helper when using custom buttons that should inherit native "" properties.
 *
 * @example type MyButtonProps = {
 *   transparent?: boolean;
 * } & ReactButtonProps;
 */
export type ReactButtonProps = DetailedHTMLProps, HTMLButtonElement>;

---

Usage in Button-ish component:

import classnames from 'classnames';
import React, { ReactNode } from 'react';
import { ReactButtonProps } from '../../types/react/ReactButtonProps';

type Props = {
  children: ReactNode;
  className?: string;
  mode?: BtnMode;
  transparent?: boolean;
} & ReactButtonProps;


const BtnCTA: React.FunctionComponent = (props: Props): JSX.Element => {
  const { children, className, mode = 'primary' as BtnMode, transparent, ...rest } = props;
  
  // Custom stuff with props

  return (
    
      {children}
    
  );
};

export default BtnCTA;

---

Usage:

 console.log('click')}>
  
  {modChatbot?.homeButtonLabel}

I can now use onClick because it's allowed due to extending from ReactButtonProps, and it's automatically forwarded to the DOM through the ...rest.