Custom React Typescript Component

Create an <Element> that takes all the normal props of <element> and does extra stuff.

An example use case is a custom button element

Create a ButtonProps type that infers the types from the props of the jsx button element.

type ButtonProps = React.ComponentPropsWithoutRef<'button'>;

/*======== NOTE =========*/
/*
    This also works:
    `type ButtonProps = React.ComponentProps<'button'>`

    but best practice is:
    ComponentPropsWithRef, if a ref is forwarded,
    or ComponentPropsWithoutRef when refs are not supported.
*/

const Button: React.FC<ButtonProps> = ({ children, ...props }) => {
  return (
    <button className="btn" {...props}>
      {children}
    </button>
  );
};

export default Button;

If you want to add custom classNames, you can destructure the className as well…

const Button: React.FC<ButtonProps> = ({ children, className, ...props }) => {
  return (
    <button className={`btn ${className}`} {...props}>
      {children}
    </button>
  );
};

export default Button;