#ActuallyAutistic web dev. Does front of the front-end. Loves perf and minimalism. Prefers HTML, CSS, Web Standards over JS, UX over DX. Hates div disease.
I agree as far as the button use case goes. It would be better to just write <button type="button" /> directly in the code so it would always remain visible as-is, and not have any <Button /> component. It should be relatively easy to just use className directly to have the correct style by using something like CSS Modules.
However the current trend seems to be the TypeScript + componentization of everything, and thus the big project reality is having everything as a component with clean types. In that world it seems like it is a rather alien thought to only have something as CSS that you would use to an element, and you would get no type aid, only documentation that tells you how to do what you need to do. It is hard to challenge the mindset since you still totally have to have the more complex components as well.
There is also one thing I didn't remember while writing the article: how much there is a need for role="button". And the truth is it should be a rather rare use case. So in that sense the component I worked out here is overkill, and in practical use wouldn't often really do that much.
However when passing in elements and having the separation of props I fail to see the maintenance nightmare that you refer to. <Component {...allTheProps} element="button" /> is quite different to <Component {...fewRelevantProps} element={<button {...domAndReactUtilityProps} />} />.
Still, for buttons would prefer a different solution, I mostly ended up using buttons as sample for their relative ease rather than being the optimal case.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
I agree as far as the button use case goes. It would be better to just write
<button type="button" />directly in the code so it would always remain visible as-is, and not have any<Button />component. It should be relatively easy to just useclassNamedirectly to have the correct style by using something like CSS Modules.However the current trend seems to be the TypeScript + componentization of everything, and thus the big project reality is having everything as a component with clean types. In that world it seems like it is a rather alien thought to only have something as CSS that you would use to an element, and you would get no type aid, only documentation that tells you how to do what you need to do. It is hard to challenge the mindset since you still totally have to have the more complex components as well.
There is also one thing I didn't remember while writing the article: how much there is a need for
role="button". And the truth is it should be a rather rare use case. So in that sense the component I worked out here is overkill, and in practical use wouldn't often really do that much.However when passing in elements and having the separation of props I fail to see the maintenance nightmare that you refer to.
<Component {...allTheProps} element="button" />is quite different to<Component {...fewRelevantProps} element={<button {...domAndReactUtilityProps} />} />.Still, for buttons would prefer a different solution, I mostly ended up using buttons as sample for their relative ease rather than being the optimal case.