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> {
  // ...
}

[pm0u]

This seems to only infer attributes that are common or applicable across all HTML elements - eg, in this case type is missing. Is this just a limitation of JSX typing?

edit: solved for my use case, for others that land here -

import { ComponentProps } from 'preact'

interface ButtonProp extends ComponentProps<'button'> {
  // ...
}

[rschristian]

When they were writing this we didn't have per-element interfaces, only a mega catch-all interface that included all known props (HTMLAttributes).

Since 10.25 that is no longer the case though, we offer interfaces for each type of element:

import { JSX } from 'preact'

interface ButtonProp extends JSX.ButtonHTMLAttributes {
  // ...
}

[pm0u]

Thank you @rschristian if that is preferred I will go with that. Appreciate the follow up!

[rschristian]

I wouldn't say it's necessarily preferred, either works! Go with whichever you personally prefer.

There's an interface called IntrinsicElements that maps each element to the props it can take, i.e., button: ButtonHTMLAttributes. ComponentProps, as you found, will let you index that interface and get the type for a particular element.

As such, both methods end up referring to the exact same type.