1 00:00:01,084 --> 00:00:02,250 ‫In this video, 2 00:00:02,250 --> 00:00:05,970 ‫we'll build a reusable heading component by learning 3 00:00:05,970 --> 00:00:09,510 ‫about some more advanced-styled component topics 4 00:00:09,510 --> 00:00:13,353 ‫such as accepting props and the CSS function. 5 00:00:14,940 --> 00:00:18,690 ‫So let's say that we wanted to make a more reusable 6 00:00:18,690 --> 00:00:21,600 ‫heading component similar to this one, 7 00:00:21,600 --> 00:00:26,430 ‫but instead of the component just working for the H1 element 8 00:00:26,430 --> 00:00:31,233 ‫we also want it to work as an H2 and an H3 element. 9 00:00:32,580 --> 00:00:35,700 ‫So let's just grab this component here 10 00:00:35,700 --> 00:00:38,403 ‫and place it into its own file, 11 00:00:40,424 --> 00:00:43,473 ‫which I'm just gonna call Heading.JSX, 12 00:00:45,720 --> 00:00:47,130 ‫place that here, 13 00:00:47,130 --> 00:00:50,760 ‫and then we need to import the styled function 14 00:00:50,760 --> 00:00:55,760 ‫and export, and let's actually call it also heading. 15 00:01:01,344 --> 00:01:04,680 ‫All right, so now let's just grab 16 00:01:04,680 --> 00:01:06,610 ‫that component here 17 00:01:11,400 --> 00:01:13,050 ‫and there we go. 18 00:01:13,050 --> 00:01:17,130 ‫So for now we have exactly what we had before, 19 00:01:17,130 --> 00:01:20,220 ‫but now I want to turn your attention to the fact 20 00:01:20,220 --> 00:01:23,550 ‫that this here is in fact a template literal, 21 00:01:23,550 --> 00:01:25,650 ‫which means that we can actually write 22 00:01:25,650 --> 00:01:28,470 ‫JavaScript expressions in there. 23 00:01:28,470 --> 00:01:31,410 ‫So for example, we could conditionally define 24 00:01:31,410 --> 00:01:36,410 ‫this font size here so we can enter this JavaScript mode, 25 00:01:36,600 --> 00:01:39,540 ‫and then here we could have for now 26 00:01:39,540 --> 00:01:41,313 ‫just some fake condition, 27 00:01:42,150 --> 00:01:46,260 ‫and, for example, then here we could return 30 pixels 28 00:01:46,260 --> 00:01:50,670 ‫and otherwise just five pixels. 29 00:01:50,670 --> 00:01:53,340 ‫And so then, since 10 is greater than five, 30 00:01:53,340 --> 00:01:56,010 ‫we get 30 pixels here. 31 00:01:56,010 --> 00:01:59,700 ‫So if we inspect that, then indeed here we get 30, 32 00:01:59,700 --> 00:02:01,950 ‫but then if we ask the condition 33 00:02:01,950 --> 00:02:05,880 ‫whether 10 is bigger than 20, we get five. 34 00:02:05,880 --> 00:02:07,560 ‫And so this is one simple way 35 00:02:07,560 --> 00:02:12,060 ‫of conditionally defining some CSS property, 36 00:02:12,060 --> 00:02:16,440 ‫but what we can also do is to write CSS 37 00:02:16,440 --> 00:02:18,333 ‫in some external variable. 38 00:02:20,520 --> 00:02:22,443 ‫So let's just say here, 39 00:02:26,375 --> 00:02:27,990 ‫text align, 40 00:02:27,990 --> 00:02:30,210 ‫set it to center, 41 00:02:30,210 --> 00:02:35,210 ‫and then we can grab that and simply place that here, 42 00:02:35,940 --> 00:02:37,650 ‫and so right away, 43 00:02:37,650 --> 00:02:42,123 ‫OR H1 then got aligned to the center right here. 44 00:02:43,380 --> 00:02:47,520 ‫Now, if we write big blocks of CSS this way, 45 00:02:47,520 --> 00:02:49,980 ‫so basically in an external variable, 46 00:02:49,980 --> 00:02:52,050 ‫then we don't get the syntax highlighting 47 00:02:52,050 --> 00:02:53,490 ‫that we are used to, 48 00:02:53,490 --> 00:02:57,840 ‫and so one way of fixing that is to use the CSS function 49 00:02:57,840 --> 00:03:02,610 ‫here so we can import CSS from styled components, 50 00:03:02,610 --> 00:03:07,350 ‫and so then here we get again this syntax highlighting. 51 00:03:07,350 --> 00:03:09,840 ‫So in this case, the CSS function 52 00:03:09,840 --> 00:03:11,610 ‫actually wouldn't be necessary, 53 00:03:11,610 --> 00:03:13,980 ‫but we can still use it just to get 54 00:03:13,980 --> 00:03:16,290 ‫OR syntax highlighting back. 55 00:03:16,290 --> 00:03:19,230 ‫Now, this function is actually necessary 56 00:03:19,230 --> 00:03:22,203 ‫if we want to do some logic in here. 57 00:03:23,100 --> 00:03:26,190 ‫So if we wanted to write some JavaScript expression here 58 00:03:26,190 --> 00:03:29,400 ‫and then use that in here, 59 00:03:29,400 --> 00:03:33,750 ‫let's say again 10 greater than five, 60 00:03:33,750 --> 00:03:36,120 ‫then in that case let's give it 61 00:03:36,120 --> 00:03:39,303 ‫the background color of yellow. 62 00:03:40,770 --> 00:03:42,093 ‫So let's grab that. 63 00:03:43,170 --> 00:03:45,483 ‫Then here we need yet another string, 64 00:03:46,440 --> 00:03:50,760 ‫and so this will work exactly the same way as before. 65 00:03:50,760 --> 00:03:53,760 ‫However, if we removed the CSS, 66 00:03:53,760 --> 00:03:56,370 ‫then that should no longer work. 67 00:03:56,370 --> 00:03:58,260 ‫Well, actually it does work, 68 00:03:58,260 --> 00:04:01,500 ‫but in some situations it will not work. 69 00:04:01,500 --> 00:04:05,220 ‫So let's check out here the documentation again, 70 00:04:05,220 --> 00:04:08,190 ‫and let's come here to the helpers, 71 00:04:08,190 --> 00:04:11,223 ‫and here I think we have the CSS function. 72 00:04:12,660 --> 00:04:16,350 ‫And so it tells us that this is useful to generate CSS 73 00:04:16,350 --> 00:04:19,083 ‫from a template literal with interpolations. 74 00:04:20,520 --> 00:04:24,810 ‫So basically we are doing something similar to this, 75 00:04:24,810 --> 00:04:28,020 ‫and so here they tell us that if we leave off the TSS 76 00:04:28,020 --> 00:04:32,073 ‫function then you will not get the results as expected. 77 00:04:32,940 --> 00:04:35,760 ‫So here that works still for some reason, 78 00:04:35,760 --> 00:04:39,600 ‫but, again, sometimes you will need the CSS function, 79 00:04:39,600 --> 00:04:43,680 ‫and so then it's useful to know that this exists. 80 00:04:43,680 --> 00:04:47,310 ‫But anyway, the reason why I'm telling you all this 81 00:04:47,310 --> 00:04:50,760 ‫so that we can use now JavaScript expressions 82 00:04:50,760 --> 00:04:54,420 ‫in here is not because we want to do this, 83 00:04:54,420 --> 00:04:58,143 ‫which is still useful, but not in this case. 84 00:04:59,160 --> 00:05:01,950 ‫So here, let's actually get rid of this, 85 00:05:01,950 --> 00:05:05,520 ‫and what I want to do now is to pass a prop 86 00:05:05,520 --> 00:05:07,410 ‫to this heading component, 87 00:05:07,410 --> 00:05:09,810 ‫and so then we can use that prop here to 88 00:05:09,810 --> 00:05:11,943 ‫conditionally set some styles. 89 00:05:13,320 --> 00:05:14,973 ‫So if we reload this now, 90 00:05:16,830 --> 00:05:18,543 ‫well then we get some problem. 91 00:05:20,160 --> 00:05:24,933 ‫Yeah. Here we probably cannot write a comment like that, 92 00:05:26,010 --> 00:05:28,713 ‫and so, yeah, now that works again. 93 00:05:30,840 --> 00:05:32,280 ‫So as I was saying, 94 00:05:32,280 --> 00:05:37,280 ‫now I want to pass in here the type, for example, 95 00:05:37,410 --> 00:05:39,993 ‫and we can give it any prop name that we want, 96 00:05:40,860 --> 00:05:44,940 ‫and so let's say that here we want actually an H1, 97 00:05:44,940 --> 00:05:46,890 ‫and let's duplicate this here. 98 00:05:46,890 --> 00:05:49,503 ‫And then here, let's say we want an H2. 99 00:05:52,740 --> 00:05:54,483 ‫Let's call this here a form. 100 00:05:55,980 --> 00:05:58,503 ‫Let's make it actually an H3. 101 00:06:00,140 --> 00:06:03,153 ‫And then here, let's give ourselves an H2. 102 00:06:08,640 --> 00:06:13,053 ‫So here, let's say check in and out. 103 00:06:14,190 --> 00:06:15,150 ‫All right. 104 00:06:15,150 --> 00:06:16,620 ‫And so now we want, of course, 105 00:06:16,620 --> 00:06:19,890 ‫these three headings here to look different. 106 00:06:19,890 --> 00:06:23,850 ‫So that's why we passed this type prop in there. 107 00:06:23,850 --> 00:06:27,123 ‫And again, we could give it any name that we wanted. 108 00:06:28,470 --> 00:06:33,390 ‫And so now we can actually receive that prop in here. 109 00:06:33,390 --> 00:06:36,180 ‫So let's enter our JavaScript mode, 110 00:06:36,180 --> 00:06:39,480 ‫and then in here we can get access to the props 111 00:06:39,480 --> 00:06:43,563 ‫by using a callback function like this. 112 00:06:44,910 --> 00:06:47,160 ‫So this function receives the props, 113 00:06:47,160 --> 00:06:50,823 ‫and then from there we can read props.type. 114 00:06:51,810 --> 00:06:56,670 ‫And so let's check if this is actually an H1, 115 00:06:56,670 --> 00:06:58,680 ‫so this string right here. 116 00:06:58,680 --> 00:07:00,570 ‫And so if it is, 117 00:07:00,570 --> 00:07:04,773 ‫then let's return this piece of CSS. 118 00:07:08,556 --> 00:07:10,667 ‫Let's actually make it a template literal 119 00:07:11,520 --> 00:07:14,250 ‫so that we can then use the CSS function 120 00:07:14,250 --> 00:07:16,383 ‫and get OR syntax highlighting. 121 00:07:18,270 --> 00:07:19,173 ‫All right. 122 00:07:24,970 --> 00:07:27,050 ‫Now here let's give it a line height of 1.4, 123 00:07:28,920 --> 00:07:31,890 ‫and so this style right here will then be common 124 00:07:31,890 --> 00:07:33,480 ‫to all of them. 125 00:07:33,480 --> 00:07:38,480 ‫But now here we can write some logic for the other two. 126 00:07:40,620 --> 00:07:44,880 ‫So checking for OR H2 and for OR H3. 127 00:07:44,880 --> 00:07:49,353 ‫So let's say that here we want a size of three REM, 128 00:07:49,353 --> 00:07:53,460 ‫then here we want two REM, 129 00:07:53,460 --> 00:07:55,893 ‫and here also two REM, 130 00:07:56,872 --> 00:07:59,313 ‫but then with less font weight. 131 00:08:00,420 --> 00:08:05,130 ‫Give it a save and beautiful just to see it. 132 00:08:05,130 --> 00:08:07,170 ‫Let's just give it one REM here, 133 00:08:07,170 --> 00:08:10,023 ‫and, indeed, that works great. 134 00:08:11,550 --> 00:08:15,870 ‫Okay. Now we just have one small problem here, 135 00:08:15,870 --> 00:08:18,030 ‫and it's actually not so small. 136 00:08:18,030 --> 00:08:21,630 ‫It's a big problem because if we inspect this, 137 00:08:21,630 --> 00:08:23,700 ‫we will see that here we actually 138 00:08:23,700 --> 00:08:26,820 ‫still have an H1 element, 139 00:08:26,820 --> 00:08:29,070 ‫so it does look like OR H2, 140 00:08:29,070 --> 00:08:32,520 ‫but the HTML element is still an H1, 141 00:08:32,520 --> 00:08:35,580 ‫and the same, of course, for this one. 142 00:08:35,580 --> 00:08:37,770 ‫And so this is really not good 143 00:08:37,770 --> 00:08:41,730 ‫for SEO and for accessibility issues. 144 00:08:41,730 --> 00:08:46,680 ‫So if we have an H2 or if we want an H2, 145 00:08:46,680 --> 00:08:50,370 ‫then we should really have an H2 element. 146 00:08:50,370 --> 00:08:51,780 ‫Well, luckily for us, 147 00:08:51,780 --> 00:08:56,040 ‫the style components library has thought of that, 148 00:08:56,040 --> 00:08:58,800 ‫so we can pass a special prop to our components 149 00:08:58,800 --> 00:09:03,630 ‫to tell them as which HTML element they should be rendered, 150 00:09:03,630 --> 00:09:07,680 ‫and that special prop is called the as prop. 151 00:09:07,680 --> 00:09:09,930 ‫So we should now instead of type, 152 00:09:09,930 --> 00:09:13,290 ‫actually use this as prop right here. 153 00:09:13,290 --> 00:09:16,293 ‫Let's actually try it out not here, but here, 154 00:09:18,570 --> 00:09:20,280 ‫and so as I save this, 155 00:09:20,280 --> 00:09:22,983 ‫now this is actually an H3. 156 00:09:24,300 --> 00:09:28,680 ‫So basically whatever I pass into this styled component 157 00:09:28,680 --> 00:09:32,010 ‫with the as prop will be the element that will then 158 00:09:32,010 --> 00:09:34,230 ‫be rendered in the HTML. 159 00:09:34,230 --> 00:09:37,440 ‫So it could also be a paragraph here. 160 00:09:37,440 --> 00:09:39,270 ‫So then we'd get a paragraph, 161 00:09:39,270 --> 00:09:41,550 ‫could be even a button, 162 00:09:41,550 --> 00:09:44,220 ‫so it could be whatever we wanted here. 163 00:09:44,220 --> 00:09:48,003 ‫But in this case, we wanted to be an H3 here. 164 00:09:49,500 --> 00:09:53,220 ‫So this type prop that we had before was basically 165 00:09:53,220 --> 00:09:55,920 ‫our own prop that we defined ourselves, 166 00:09:55,920 --> 00:09:59,760 ‫but now we are using this as prop that is really part of 167 00:09:59,760 --> 00:10:03,660 ‫styled components now, right? 168 00:10:03,660 --> 00:10:07,470 ‫But now, of course, we lost all of our styling, 169 00:10:07,470 --> 00:10:09,840 ‫but that's very easy to get back 170 00:10:09,840 --> 00:10:13,350 ‫because we can just replace this type prop here 171 00:10:13,350 --> 00:10:14,880 ‫with the as prop. 172 00:10:14,880 --> 00:10:18,390 ‫So then all our stylings are back to what they were before 173 00:10:18,390 --> 00:10:21,870 ‫but now they are also semantically correct here 174 00:10:21,870 --> 00:10:22,773 ‫in the markup.