Create Highly Reusable React Components in Minutes with TypeScript

Let's look into a best practice for creating highly reusable React components. We'll use TypeScript for that, but JavaScript works just fine too. You'll learn a really helpful trick to get type completion on your component, saving you lots of maintenance and headache in the long run. Also, we'll conditionally display tailwind classes with a convenient utility function! :)

0:00 - Intro
0:18 - The Problem
3:27 - The Solution
10:26 - Outro

The stuff I use to make my videos
thats pretty much it. Those are affiliate links so I might earn a commission if you purchase after clicking them. :^)

[scumbag_kiko]

Ive had this on my mind this past week, this video came just in time! Great job!

[snatvb]

Exists better way: use and you will avoid all boilerplate, also you need to wrap component with forwardref - then it will really common component
at least avoid interfaces for declare type of props, because this is final type, you don't imply that your props type may be extended from outside with merging declaration (actually it may be unintentional)

[nazarshvets]

```
type ButtonProps = & {
// ...custom props
}
```

`HTMLButtonAttributes` extends generic `HTMLAttributes` and add properties which only exist for buttons (like `type: 'button' | 'submit' | 'reset'`, `form: string`, `disabled: boolean` and so on)

[xylarwardhan]

Ok woah this is extremely useful! Thank you so much!

[PedroFernandez-ivuv]

great video Josh, really appreciate it

[Grimz]

I've been playing around with this concept of spreading all props to components created from a generic component that calls reacts create Element function based on the element type then just spreads the props from a json object. Pretty cool low code concept.

[bunyameennurudeen]

Great tutorial. Thanks for the lovely explanation

[mdkawsarislamyeasin]

Thanks, I didn't know that we can extend all other attributes from TS in our interfaces

[RoshanKumar-shve]

I personally like cva (class variance authority) for reusable components.. have u tried it?

[SMILESHOW]

what if my custom component has input but also a label? how to pass attributes of 2 elements ?

[pieter]

Now I know what old time devs mean when they say new devs are "reinventing" stuff, in this case OOP and inheritance.
Not knocking btw, I think this is great!

[yadang]

Do clsx and twMerge mess with Tailwind tree-shaking?

[kulbirsingh]

This is a great video, keep up the good work!! Can you explain how the ` 'cursor-not-allowed': isLoading ` works? How is that conditionally adding the class? shouldn't you use something like isLoading && ' cursor-not-allowed'' instead?

[oleksandrluchytskyi]

is it alias in you import … ‘@/components/…’ how to do this for create-react-app starter?

[marcintichoniuk]

type Props = & {
customProp?: string;
};

You will have disabled attribute

[dev-suresh]

Hi Josh, informative video, however, I came here to find the solution to how we can use event handlers as props as I am getting error that Event Handlers cannot be passed as props in nextjs

[twanabrno]

thank you but onClick is not working ? Can anyone help and say why its not

[gpyk]

so he is extending it with "disabled" which is already HTMLButtonElement property, makes sense :D

[bielarusajed]

Didn't you permanently diaabled button? Isn't it right to make {disabled} instead of your disabled?

[dimasadnan]

noob question : why use external class value package instead of using template literals?

Edit : and use ternary for conditional classes