React TypeScript Tutorial – 22 – Wrapping HTML Elements
Video Title: React TypeScript Tutorial – 22 – Wrapping HTML Elements
In this video let’s learn how to wrap html elements and create custom components which can be used in a react application if you’re building a design system or even a regular react app without relying on a ui component library it is common to create basic elements like buttons and inputs with your own
Styling such components though should be capable of accepting special props that you want to use along with the normal html element props let’s see how to achieve that in this video this example in the components folder i have created a new folder called html within the folder i’ve created two files button.tsx
And input.tsx let’s start with button.tsx i’ve created a very simple component called custom button which renders a button html element with label as the button text what we need to do is pass in a prop that will affect how the button is styled so at the top type button props it’s an object
And we are going to specify a prop called variant the value can be primary or secondary let’s destructure this variant from props variant and props type is button props now the way we are going to use this for our button is by adding styles based on its value
To keep this simple though i’m going to specify class name is equal to a template literal which is a class with the variant name in a more practical scenario a primary class would be applied if variant is primary and a secondary class would be applied if variant is secondary
But we don’t really care about the class implementation so i have specified a class is dependent on the variant prop now if i go back to app.esx and import and invoke the component custom button we should be able to pass in the variant prop so variant is equal to primary
However this doesn’t work for us does it the button label is always label in between the opening and closing tags if i try to include primary button as the text typescript throws an error it basically says children props are not allowed even a basic on click prop cannot be specified say on click
There’s a simple function that locks to the console the string clicked typescript throws an error now to fix these errors we need to specify button props to include the html button props in addition to our special prop for that react again provides a type so we’re going to say
Apart from the variant prop button props will also include react dot component props and for the generic type we specify button now we can destructure children and rest in the jsx label can be replaced with children prop and we spread rest of the props on the button element so dot dot rest
You can see that typescript is happy again and our component will work as expected let’s do the same for our custom input as well at the top type input props is equal to react dot component props we specify input now within parentheses we get hold of props of type input props
And simply spread it on the input element so this is pretty much how you wrap html elements and add your own types and logic in react now one more important typescript feature that comes in handy when wrapping html elements is the omit keyword omit takes an object type and removes the specified properties
Let’s look at an example at the moment the children type is react dot react node which comes from the html button element props this allows us to pass in any react node type as children to the custom button element so i can pass in div tag primary button div tag
And this would work but let’s say we want to restrict the children type to just strings so back in button.tsx in button props we can specify children of type string however when we do this you can see the type of children is an intersection of string and react node
Not really what we want we need to tell typescript to leave out the children type from the html button element type and for that we can use omit and the syntax is the omit keyword angle brackets the type from which we want to omit properties which is the button element
Type so that is going to be within angle brackets and then a comma followed by the type we want to omit which is children if we now hover on the children prop you can see it is of type string only and we have an error in app.tsx change it to a simple string
And the error is now gone omitting props is something you will come across when building design systems or components from scratch so make sure you remember about this alright thank you for watching and i’ll see you in the next video
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
Use coupon code CodevolutionYoutube for 100% off lifetime discount to your subscription at https://www.taskade.com/billing
best part @4:26
as a beginner, I hate typescript.
thanks for the content btw
Typescript is happyy
My Fav Phrase : "TypeScript is happy again"!
So this is essentially how components in design packages are created?
GoodJob!
How does children still get the original value after 'Omit'ing from React.ComponentProps? Isnt it a just an ordinary string now?
Great explanation Vishwas. You just showed me how MUI creates the component
Wow. I learned so much from this. Thanks!
After taking this course, I am happy, once again 😀
How is it posible to Wrap ReactNatvie Components for exemple a "TextInput" ?
GREAT EXPLAINATION SIR. THANK YOU🙂🙏
nice techniques
please tell about key of operator too
Vishwas you man is incredible. You served a huge purpose in my learning Phase especially in React, Next.JS and now React with TypeScript. Once Again Thanks for this wonderful series. Your way of explaining things is just mind-blowing.
Hey Vishwas! Impressive content. You should have received an email from me regarding an interesting collaboration. Just a nudge here 🙂
This is a Netflix for developer
Thank You
Thank you Vishwas.
Hey Vishwas, you are amazing. I learn a lot of things from you. Thanks you.
Hey vishwas, when is this playlist ending ? Can you post a timeline ?