Add prop types for react html elements

[Tommydreamer57]

Is there a way to add proptypes for plain react (HTML) elements, in a way similar to this?

MyButton.propTypes = {
    onClick: PropTypes.func,
    buttonProps: PropTypes.HTMLButtonProps,
};
function MyButton({ onClick, buttonProps }) {
    return (
        <button
            onClick={onClick}
            {...buttonProps}
        />
    );
}

Or even better, to simply spread those props into the prop types like this:

MyButton.propTypes = {
    // onClick: PropTypes.func,
    ...PropTypes.HTMLButtonProps,
};
function MyButton({ onClick, ...buttonProps }) {
    return (
        <button
            onClick={onClick}
            {...buttonProps}
        />
    );
}

Obviously, the examples are kind of useless, but for large components that spread certain props into html elements it would be very useful to be able to declare prop types for those props.

Thank you!

[ljharb]

That would be a massive effort to maintain, since the list of valid attributes per html element changes all the time. (Separately, it’s generally considered a bad practice to spread props onto html elements - favor explicit over implicit)

It’s certainly possible, but there’s so many html elements with so large and complex lists of attributes and attribute value validations that it’s probably best done as a separate project.

[Tommydreamer57]

That makes sense, however I assumed react already has somewhat of a list somewhere since vscode already provides really nice autocomplete when typing plain elements in react.

Do you know where this list comes from?

I'll take into account your suggestion not to spread props into html elements. That actually sounds like a better solution. Thanks

[ljharb]

If React core exposed that list - which I wish it would, but it doesn't - then it might indeed be much easier to make the propType :-)

For now, though, I'm going to close this.