[Basic] React.HTMLProps doesn't work

[pavloko]

What cheatsheet is this about? (if applicable)
Basic cheatsheet

What's your issue or idea?
Write here

I'd like to propose to changing React.HTMLProps in favor of React.HTMLAttributes.

Looking at the type definitions of React, all HTML elements are defined with DetailedHTMLProps and it's using HTMLAttributes instead of HTMLProps.

With the following versions:

    "react": "16.8.6",
    "react-dom": "16.8.6"
    "@types/react": "16.8.22",
    "@types/react-dom": "16.8.4"

I'm seeing

[swyxio]

this one is a @ferdaber one

[ferdaber]

HTMLProps uses AllHTMLAttributes, which is the supertype of all HTML attributes, it is used for HTML elements which you don't the specific tag name for, and so is less specific than the ones defined in JSX.IntrinsicElements. For example when using HTMLProps<HTMLButtonElement> you will be unable to type its onChange event handler prop, as opposed to DetailedHTMLAttributes<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>.

[pavloko]

I'm sorry, I don't understand.

Could you please explain the use case for React.HTMLProps? Could also comment on the errors in my previous post? Could you explain when I should you React.HTMLProps vs React.HTMLAttributes?

The example I provided:

type Props = {
  fullWidth: boolean
} & React.HTMLProps<HTMLButtonElement>

const Button: React.FC<Props> = ({ fullWidth, children, ...nativeProps }) => {
	return <button {...nativeProps}>{children}</button>
})

this will cause an error:

is not assignable to type 'ButtonHTMLAttributes<HTMLButtonElement>'
Type 'string' is not assignable to type '"button" | "submit" | "reset" | undefined'

I think this case of extending default HTML elements is quite common, so maybe we could include a line about it.

[swyxio]

i dont know where in the chain of generics the string is introduced, but the fix is to just narrow the type type...

type Props = {
  fullWidth: boolean
  type?: "button" | "submit" | "reset"
} & React.HTMLProps<HTMLButtonElement>

const Button: React.FC<Props> = ({ fullWidth, children, ...nativeProps }) => {
	return <button {...nativeProps}>{children}</button>
}

[pavloko]

Interesting, but that looks like a hack:) type should be part of standard HTML button attributes.

[swyxio]

it is. if the upstream stuff doesnt give us what we need, we just have to get good at problemsolving.

[ferdaber]

I'm not sure what HTMLProps are for-- it predated my time as a maintainer of the React types, but what I do know is that when you extend host HTML elements as a component, you should always just use JSX.IntrinsicAttributes['tagname'] or its corresponding type alias (in the case of buttons it's React.DetailedHTMLAttributes<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>

[pavloko]

@sw-yx Yes, absolutely. I was trying to say get to the root of the problem and see if we can fix it there.

@ferdaber I've noticed that in React types HTMLProps are not used anywhere internally. Do you think it's worth removing them all together?

I'm not sure what HTMLProps are for

Why do we suggest HTMLProps in this guide? Does it make sense to change it to HTMLAttributes?

[swyxio]

@pavloko i dont have a strong reason apart from its usually what type inference gives me. if HTMLAttributes or JSX.IntrinsicAttributes['tagname'] is better then lets do that!!!!

[swyxio]

well it took me a year to actually get around to looking at this but i really appreciate @pavloko asking this qtn, bc it does prove there is something better that can be done:

https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcA5FDvmQNwCwAUIwPTNyhgA2WIWAdjGQxgEPoxgBPMFjgAjGHwAqUmQF44AKQDKADQB0ASQFRgfVMFwBRbrwGoA2mVkBXGDFFkAuoywAPSLDsAlhQBHgyAEKu7nwACsRg6H4w-AAm6PJKKnAA3oxwcKjSuMDInPEQYAD8AFyFMCZ8AOb0DAC+Pv7QhM58+CJ8cFFuogAUYAmodcMxFYkAlLn5cLiiqPA5hcWl5QkANHB6R5TrcG1w6hOVqK0FrHCpEIUkWDAAFqZNcADuwO9bWBKZTmy0oMGcUEGAB4XCNBjkjnoTjBzswAHytDpMBj3ZyoZBNLCMAi9fqiOAAQTAYFGizyDDubGU0nIACJTAA3MrAVKssjsdB8CDwNDmJp8ZCybhwdwy7JkVmwmKsuAAHzgrNQzlkID+KvVrJOr31cF6qSwBFMWFSZD0owATABme32+bLe5giHQmbkyTSVTsvhczg81lowqcVIAawAVnAocwfXw0e62AB5ADSoNeXvjSbl-s12t1MDDMuS8cT0VEKfaQA

import * as React from 'react';
type btnType = JSX.IntrinsicElements['button'] // cannot inline or will error
export interface ButtonProps extends btnType {
  specialProp: string;
}
export function Button(props: ButtonProps) {
  const { specialProp, ...rest } = props;
  // do something with specialProp
  return <button {...rest} />;
}

will wait a bit in cases there are any responses