how to extend HTML elements like a button

[ljmerza]

I have a component that extends the HTML button but i cant seem to get the right typings so i dont have to explicitly add every attr of a button liskt disabled, onClick ,etc.

import { h, FunctionalComponent, ComponentChildren } from 'preact


interface ButtonProps {
  onClick: any
  children: ComponentChildren
}

export const Button: FunctionalComponent<ButtonProps> = ({ onClick, children }) => {
  return (
    <button onClick={onClick}>
      {children}
    </button>
  )
}

export default Button

I tried this but it doesnt work (HTMLAttributes doesnt exist on preact)

import { h, FunctionalComponent, ComponentChildren, HTMLAttributes } from 'preact'

interface ButtonProps extends HTMLAttributes<HTMLButtonElement> {
  valid: Boolean;
}

[657KB]

In Preact, HTMLAttributes are defined in the JSX namespace.

import { JSX } from 'preact'

interface ButtonProp extends JSX.HTMLAttributes<HTMLButtonElement> {
  // ...
}