はてなブログに投稿しました ComponentPropsWithoutRef<'button'> と ButtonHTMLAttributes<HTMLButtonElement> は何が違うのか? - Panda Noir pandanoir.info/entry/2025/11… #はてなブログ HTMLAttributesを使う代わりにComponentPropsを使ったほうがいいよ(結論)って記事を書いたよ

🎯 Become a Front-End Web Developer: The Ultimate Guide Front-end web development is an exciting and rewarding career. If you want to build stunning websites and web apps, this guide will help you become a professional front-end developer. A thread 🧵👇🏻👇🏻 #HTML #HTMLTutorial #LearnHTML #HTMLForBeginners #HTML5 #WebDevelopment #FrontendDevelopment #WebDesign #HTMLBasics #Coding #Programming #HTMLTags #HTMLForms #HTMLTables #HTMLAndCSS #HTMLAttributes #HTMLWebsite #HTMLFullCourse #react #javascript #HTMLStepByStep #HTMLElements #HTMLEssentials #code #coding

And if TS gets mad you can do this: declare module 'react' { interface ButtonHTMLAttributes<T> extends HTMLAttributes<T> { _variant?: "default" | "outline"; } }

What is at the root of your website looking so beautiful? It's the HTML code! Read how HTML plays a inevitable role in web designing at: tinyurl.com/w2vcxd7n #html5 #FrontEnd #coding #programminghelp #htmltags #htmlattributes @html @html_to_design @html5gamedevs

Actually, I am wrong. HTMLAttributes<HTMLDivElement> doesn’t have “ref”.

Typing `data-` attributes in HTMLAttributes via `data-${string}?: string | undefined`. In case anybody wants to contribute that 😉 Currently only works in JSX via <div data-foo="a" />. Not when you try to construct an actual object e.g. props: HTMLAttributes = { 'data-foo': a}

> removing unions over HTMLAttributes What do you mean? Got an example?

It was 90% just removing unions over HTMLAttributes, not super interesting I guess, but those types are massive

The highest perf issues basically boiled down to unions over large types like React.HTMLProps or HTMLAttributes This was my POC PR that I broke down into smaller ones (you can search PR's with me as the author and use interface/typescript as they keyword to see examples) github.com/getsentry/sentry/…

[13/100] Descobri pelo @edusantosbrito que esses tipos declarados não precisam ficar lá. O ButtonHTMLAtributes faz extends em HTMLAttributes, que já possui o tipo className, e também herda do DomAttributes, onde children já está definido. #100DiasDeCodigo #100DaysOfCode

Yeah but the typings are annoying: const SettingsSection = (props: Omit<HTMLAttributes<HTMLDivElement>, 'className'>) => {}

type Props = DetailedHTMLProps<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> mais plutôt : type Props = ComponentPropsWithoutRef<"button">

Awesome work! One super useful technique that I think deserves to be added here is typing { ...props } by extending the interface with they types from a DOM interface. ex: interface MyButton extends HTMLAttributes<HTMLButtonElement>

If you want it to work in every file, use declare global instead. HTMLAttributes doesn't actually belong to the react module itself, React just overwrites it.

Which would you use to mirror an HTML element in a custom component? 🔹ComponentPropsWithoutRef 🔹ComponentProps 🔹InputHTMLAttributes 🔹JSX.IntrinsicElements 🔹HTMLAttributes 🔹HTMLProps

This thread is saved to your Notion database. Tags: [Htmlattributes]

Yes, very similar. Although I ideally want to make this something most of us never reach for and instead provide the interfaces like HTMLAttributes directly, as shown later in this thread

I found a very subtle utility function for tailwind users to add classNames responsively. export const withDesktopStyle = ( classNames: HTMLAttributes<HTMLElement>['className'] ) => { return ` ${classNames}`.split(' ').join(' lg:'); }; 👀👀

5 Useful HTML Attributes That You May Have Missed widgetcore.com/5-useful-html… #HTML #HTMLAttributes #webdevelopment #WebDeveloper #webdev #widgetcore

Html Attributes e-siksha.in/article/html-att… #html #HTML5 #htmltags #htmlattributes #attributes #coding #100DaysOfCode #CodeNewbie #DEVCommunity #javascript #Google #programminghumor #tech #code #Website #learner #webdev #eLearning #esiksha #esikshalearninghub