‫In this video,
‫we'll build a reusable heading component by learning
‫about some more advanced-styled component topics
‫such as accepting props and the CSS function.
‫So let's say that we wanted to make a more reusable
‫heading component similar to this one,
‫but instead of the component just working for the H1 element
‫we also want it to work as an H2 and an H3 element.
‫So let's just grab this component here
‫and place it into its own file,
‫which I'm just gonna call Heading.JSX,
‫place that here,
‫and then we need to import the styled function
‫and export, and let's actually call it also heading.
‫All right, so now let's just grab
‫that component here
‫and there we go.
‫So for now we have exactly what we had before,
‫but now I want to turn your attention to the fact
‫that this here is in fact a template literal,
‫which means that we can actually write
‫JavaScript expressions in there.
‫So for example, we could conditionally define
‫this font size here so we can enter this JavaScript mode,
‫and then here we could have for now
‫just some fake condition,
‫and, for example, then here we could return 30 pixels
‫and otherwise just five pixels.
‫And so then, since 10 is greater than five,
‫we get 30 pixels here.
‫So if we inspect that, then indeed here we get 30,
‫but then if we ask the condition
‫whether 10 is bigger than 20, we get five.
‫And so this is one simple way
‫of conditionally defining some CSS property,
‫but what we can also do is to write CSS
‫in some external variable.
‫So let's just say here,
‫text align,
‫set it to center,
‫and then we can grab that and simply place that here,
‫and so right away,
‫OR H1 then got aligned to the center right here.
‫Now, if we write big blocks of CSS this way,
‫so basically in an external variable,
‫then we don't get the syntax highlighting
‫that we are used to,
‫and so one way of fixing that is to use the CSS function
‫here so we can import CSS from styled components,
‫and so then here we get again this syntax highlighting.
‫So in this case, the CSS function
‫actually wouldn't be necessary,
‫but we can still use it just to get
‫OR syntax highlighting back.
‫Now, this function is actually necessary
‫if we want to do some logic in here.
‫So if we wanted to write some JavaScript expression here
‫and then use that in here,
‫let's say again 10 greater than five,
‫then in that case let's give it
‫the background color of yellow.
‫So let's grab that.
‫Then here we need yet another string,
‫and so this will work exactly the same way as before.
‫However, if we removed the CSS,
‫then that should no longer work.
‫Well, actually it does work,
‫but in some situations it will not work.
‫So let's check out here the documentation again,
‫and let's come here to the helpers,
‫and here I think we have the CSS function.
‫And so it tells us that this is useful to generate CSS
‫from a template literal with interpolations.
‫So basically we are doing something similar to this,
‫and so here they tell us that if we leave off the TSS
‫function then you will not get the results as expected.
‫So here that works still for some reason,
‫but, again, sometimes you will need the CSS function,
‫and so then it's useful to know that this exists.
‫But anyway, the reason why I'm telling you all this
‫so that we can use now JavaScript expressions
‫in here is not because we want to do this,
‫which is still useful, but not in this case.
‫So here, let's actually get rid of this,
‫and what I want to do now is to pass a prop
‫to this heading component,
‫and so then we can use that prop here to
‫conditionally set some styles.
‫So if we reload this now,
‫well then we get some problem.
‫Yeah. Here we probably cannot write a comment like that,
‫and so, yeah, now that works again.
‫So as I was saying,
‫now I want to pass in here the type, for example,
‫and we can give it any prop name that we want,
‫and so let's say that here we want actually an H1,
‫and let's duplicate this here.
‫And then here, let's say we want an H2.
‫Let's call this here a form.
‫Let's make it actually an H3.
‫And then here, let's give ourselves an H2.
‫So here, let's say check in and out.
‫All right.
‫And so now we want, of course,
‫these three headings here to look different.
‫So that's why we passed this type prop in there.
‫And again, we could give it any name that we wanted.
‫And so now we can actually receive that prop in here.
‫So let's enter our JavaScript mode,
‫and then in here we can get access to the props
‫by using a callback function like this.
‫So this function receives the props,
‫and then from there we can read props.type.
‫And so let's check if this is actually an H1,
‫so this string right here.
‫And so if it is,
‫then let's return this piece of CSS.
‫Let's actually make it a template literal
‫so that we can then use the CSS function
‫and get OR syntax highlighting.
‫All right.
‫Now here let's give it a line height of 1.4,
‫and so this style right here will then be common
‫to all of them.
‫But now here we can write some logic for the other two.
‫So checking for OR H2 and for OR H3.
‫So let's say that here we want a size of three REM,
‫then here we want two REM,
‫and here also two REM,
‫but then with less font weight.
‫Give it a save and beautiful just to see it.
‫Let's just give it one REM here,
‫and, indeed, that works great.
‫Okay. Now we just have one small problem here,
‫and it's actually not so small.
‫It's a big problem because if we inspect this,
‫we will see that here we actually
‫still have an H1 element,
‫so it does look like OR H2,
‫but the HTML element is still an H1,
‫and the same, of course, for this one.
‫And so this is really not good
‫for SEO and for accessibility issues.
‫So if we have an H2 or if we want an H2,
‫then we should really have an H2 element.
‫Well, luckily for us,
‫the style components library has thought of that,
‫so we can pass a special prop to our components
‫to tell them as which HTML element they should be rendered,
‫and that special prop is called the as prop.
‫So we should now instead of type,
‫actually use this as prop right here.
‫Let's actually try it out not here, but here,
‫and so as I save this,
‫now this is actually an H3.
‫So basically whatever I pass into this styled component
‫with the as prop will be the element that will then
‫be rendered in the HTML.
‫So it could also be a paragraph here.
‫So then we'd get a paragraph,
‫could be even a button,
‫so it could be whatever we wanted here.
‫But in this case, we wanted to be an H3 here.
‫So this type prop that we had before was basically
‫our own prop that we defined ourselves,
‫but now we are using this as prop that is really part of
‫styled components now, right?
‫But now, of course, we lost all of our styling,
‫but that's very easy to get back
‫because we can just replace this type prop here
‫with the as prop.
‫So then all our stylings are back to what they were before
‫but now they are also semantically correct here
‫in the markup.