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)
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!
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.
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
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.
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.
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?
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
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..
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)
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.
@@MisouSup unforchantly not really :((
Need to teach every developer follow this rules
@@snatvb How did you learn that to do it that way ?
@@CoIdestMoments somehow came with time
thanks, i was thinking that redeclaring the disabled property was not the best way
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!
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.
```
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)
thank you but onClick is not working ? Can anyone help and say why its not
I personally like cva (class variance authority) for reusable components.. have u tried it?
The latest video on my channel is about this!
what if my custom component has input but also a label? how to pass attributes of 2 elements ?
Really basic but really useful
this is great, Champ. I love this
great video Josh, really appreciate it
Ok woah this is extremely useful! Thank you so much!
is it alias in you import … ‘@/components/…’ how to do this for create-react-app starter?
Thanks, I didn't know that we can extend all other attributes from TS in our interfaces
You are a life savor. Thank you
Do clsx and twMerge mess with Tailwind tree-shaking?
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
Didn't you permanently diaabled button? Isn't it right to make {disabled} instead of your disabled?
Why don't you use forwardRef?
noob question : why use external class value package instead of using template literals?
Edit : and use ternary for conditional classes
it makes it easier to make conditional classes
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.
@@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!
thank you! very clear
Great tutorial. Thanks for the lovely explanation
It's crazy thank you so much
Why is twMerge needed?
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.
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?
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
type Props = React.ComponentPropsWithoutRef & {
customProp?: string;
};
You will have disabled attribute
Thank you so much
Thanks josh
Thank you
Hm kinda defeat the purpose of typescript if every attribute is optional
That doesn't introduce any vulnerability, since the suggested properties are all supported by the corresponding html tags
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..
But you are actually aware of them existing.
in the end you'll go full circle of using component libraries
No library plss
Gold
dude i cant believe it I just released a similar video on this yesterday
frontendmasters was inspiration ?
@@zoki5388 no i am not aware of who that is, but i will check them out!