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! :)
⭐ Our startup: wordful.ai
⭐ My GitHub: github.com/joschan21
0:00 - Intro
0:18 - The Problem
3:27 - The Solution
10:26 - Outro
The stuff I use to make my videos
Camera: amzn.to/3XcqRKO
Light: amzn.to/3Xc1yIE
Keyboard: amzn.to/3CKxnAi
Mouse: amzn.to/3CNcfcm
Microphone: amzn.to/3iybVHC
Headphones: amzn.to/3IHTTgH
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 React.ComponentProps 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)

[@MisouSup]

I do it like this all the time as well. I was wondering if this is common because I don't see people mentioning it so much.

[@snatvb]

​@@MisouSup unforchantly not really :((
Need to teach every developer follow this rules

[@CoIdestMoments]

@@snatvb How did you learn that to do it that way ?

[@snatvb]

@@CoIdestMoments somehow came with time

[@gatocode316]

thanks, i was thinking that redeclaring the disabled property was not the best way

[@xylarwardhan8445]

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

[@51Grimz]

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.

[@PedroFernandez-iv2uv]

great video Josh, really appreciate it

[@francisagada5810]

this is great, Champ. I love this

[@SMILESHOW1337]

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

[@ya4dang1]

Do clsx and twMerge mess with Tailwind tree-shaking?

[@milad8436]

You are a life savor. Thank you

[@oleksandrluchytskyi6867]

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

[@mdkawsarislamyeasin4040]

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

[@bunyameennurudeen173]

Great tutorial. Thanks for the lovely explanation

[@nazarshvets7501]

```
type ButtonProps = React.HTMLButtonAttributes & {
// ...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)

[@tranminhhaifet]

thank you! very clear

[@RoshanKumar-sh8ve]

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

[@mohaniya15]

The latest video on my channel is about this!

[@twanabrno875]

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

[@codewithguillaume]

Really basic but really useful

[@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

[@ILoveTheMusic-rk7nr]

It's crazy thank you so much

[@aymenbachiri-yh2hd]

Thank you so much

[@pieter5466]

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!

[@kulbirsingh8915]

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?

[@joshtriedcoding]

That works fine too, however, when you inspect that in the browser and the condition is false you might have "false" or "undefined" as the class (not a huge deal tho). With this library, the syntax is slighty different as your pointed out, making those conditionals way easier to write and read

[@satishmaurya2089]

Thanks josh

[@victoriousinsight]

Thank you

[@bielarusajed]

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

[@dimasadnan4873]

noob question : why use external class value package instead of using template literals?
Edit : and use ternary for conditional classes

[@okage_]

it makes it easier to make conditional classes

[@nicholascostadev]

tailwindMerge solves some mistakes that can happen at runtime like two conflicting classes, and classNames or clsx can make your code more readable if at large scale, meaning there are lots of conditional classes. You can think of a button not using any of these packages having 6 conditionals, would have lots of ternaries meaning that for some people it may be less readable. I don't quite use both packages, but I understand its use case.

[@dimasadnan4873]

@@nicholascostadev still don't fully get it but might be because my lack of experience, I'll keep them in mind though. Thanks for the answers!

[@gpyk306]

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

[@marcintichoniuk6554]

type Props = React.ComponentPropsWithoutRef & {
customProp?: string;
};
You will have disabled attribute

[@pheisar]

Why is twMerge needed?

[@jpvlog8129]

twMerge is helpful in merging or concatenating styles. Sometimes, the CSS you inputted may not effect and to solved that issue, you will need to add exclamation point (means important). It's kind of ugly.
This issue can be solved by twMerge, no more prefix exclamation point and the CSS will work as expected.

[@insidetech4488]

Why don't you use forwardRef?

[@codecleric4972]

Gold

[@namesare4fools]

in the end you'll go full circle of using component libraries

[@hardwired89]

No library plss

[@andrewc8125]

Hm kinda defeat the purpose of typescript if every attribute is optional

[@imadmachi3227]

That doesn't introduce any vulnerability, since the suggested properties are all supported by the corresponding html tags

[@rusliabdulgani9920]

nope, optional is not mean you pass the type strict, cause the value is just its original value or undefined, you will ignore the power of typescript if you pass it using "any" type..

[@mohaniya15]

dude i cant believe it I just released a similar video on this yesterday

[@zoki5388]

frontendmasters was inspiration ?

[@mohaniya15]

@@zoki5388 no i am not aware of who that is, but i will check them out!