Hygraph (with Next.js) Tutorial #6 - Rendering Rich Content

Key Takeaways

All right then my friends. In the last lesson we fetched the about page content and then we showed that on the about page and to render the HTML content. We used this dangerously set in a HTML prop on the div. But now I want to show you another way we can output the HTML content using a package developed by hygraph themselves. And that package is called the rich text react renderer. So you can read more about this package on the GitHub repo for the package which I will leave a link to down below the video. But if we scroll down a little bit, you can see this is how we install a package. So we'll copy that install script first of all. And then if we keep scrolling, you should see that we can use this rich text component from that package which we use to render the content. And what's nice about using this component is that we can customize then how each element from the rich text content is rendered and displayed. For example, if there's a link in the rich content, you can choose to add classes to the anchor tag or even render it as a next link component instead. So, we're going to go ahead and use this now. But before we do, I do want to mention that when we pass the content into the rich text component, it must be either in raw or JSON format, not in the HTML format that we used in the last lesson. because this package constructs and renders the HTML itself based on the a and a stands for abstract syntax tree and it looks something like this tree of nodes right here. So if you try to pass in the HTML content it's not going to work. That's okay because we can just swap that HTML property for the raw one instead which does work. So then make sure you've copied that install command first of all and then head back to the code. All right then. So, I'm going to open up a terminal now and I'm going to cancel out of the current server process and then we're going to paste in this command. Let me just clear this first to give us some room. So, let me paste in this command to install that package. Press enter. All right. So, now that's done, we can go ahead to the about page to use it. So at the top of this page, we're going to import that rich text component by saying import then curly braces then rich text and that is going to come from at graph CMS and then forward slash reactenrier. All right. So once you've done that it means you can use that component now to output the content instead of the way that we currently do it. So, let's scroll down to that div and we're just going to delete that div and instead we'll replace it with the rich text component that we just imported. And on this we need a content prop which remember needs to have a raw or JSON content value so it can build and render the HTML based on that a. So to get that raw format, we can go back to the query in the higraph file and we can change the HTML property right here to be raw instead. Once we have done that, we can head back to the about page and for the value of the content prop on the rich text component, we can specify content. Which is what we're now asking for from Higraph, right? And without any other setup, this should now completely work as it is. So let's save the file and try it out in the browser. So then if we head to the about page, we should still see all of that HTML content rendered correctly, which is awesome. So whatever we used a heading in the rich content editor in hygraph, that's displayed as a heading tag in the page. Same for links, they're displayed as anchor tags. So that's good. Everything works. But so far, we've not really been able to customize the HTML content that gets rendered. For example, we've not been able to add custom classes to the tags. so we can apply additional styles to them. Or in the case of links, it might be that we want to display internal site links using the next link component instead of an anchor tag. Or we might just want to style external links differently, which open in a new tab. Well, we can easily do all of that using this rich text component and a prop called renderers, which allows us to customize how elements get rendered. So then let's come down to this component and tack on the renderers prop. And we set this equal to an object. So double curly braces and then inside the object we can add properties to represent the different elements which get rendered and then customize that rendering behavior. For example, I could add an h3 property right here and the value of these properties should be a function which returns a template just like a normal react component does. And just like a normal React component, it takes a prop argument from which we can destructure the children prop. And this children prop represents the content within the h3 tag. So then imagine whenever there's an H3 in the rich text content that we want to output that H3 with a specific set of Tailwind classes. Well, we just return that H3 template with all those classes right here. So I could add the H3 and apply various different Tailwind classes to it. And they could be like my six for some margin. uh PP4 that's padding at the bottom, border hyphen B - 1 to give it a border bottom, and also border hyphen gray hyphen 200. And then inside the H3 tag, we want to output the children prop to make sure that the content within the H3 from the rich editor still gets output. If we didn't add this children prop, then we just get an empty H3 element with no text content inside it. So then let me very quickly run through all of this again. Now by adding the renderers prop, we can customize how certain elements are rendered to the browser. In this object, we add a property for every element that we want to customize. When we do that, whenever one of those elements appear in the content, we run the function to return a customized version of that element. We also take in the children prop, which represents whatever content is inside the element, for example, the text content, and we render that too. So in this scenario, all we're doing is replacing any standard H3 elements from the rich content with an H3 containing all these custom tailwind classes. And that means every H3 in the rich content will be displayed like this. All right. So now let's add some more elements that we want to customize. So the next element I want to register is the block quote element because I know I added a block quote somewhere in the about content. So let me add that as a property first and as a value to this. Again, we need a function which returns a template. And we're just going to dstructure the children from the props argument as well. Okay. So, instead of me writing this returned template out from scratch, I'm just going to copy it and paste it right here instead. But it's very simple, just a standard block quote tag with the children being rendered inside it. And then finally, I'm going to customize the output of one more tag, which is the anchor tag. So the property name is going to be an a in this case. And again the value of this needs to be a function which returns a template. And again we can dstructure the children prop from the props arguments. So we can use it inside the template. But this time as well as the children prop we also get access to another prop which is the href prop. And this is the href of the anchor tag from the contents. And we're going to use that in a moment to conditionally render either an anchor tag or a next link component. So then this time in the function instead of just directly returning the template we're going to do a little if check inside it first and that if check is going to say if href and we'll use the starts with method on that and we want to check if it starts with http because if it does I'm just assuming this link is going to be an external one otherwise the href would most likely start with a forward slash followed by the path to a page for example forward/about. So then if this is true, I want to render a normal anchor tag. So let's say return followed by parenthesis and then we'll add the anchor tag. And the href of this anchor tag is just the prop value. So we can pass that in as well. We'll also use the target attribute. And we're going to set the value to be underscore blank. So the external links are going to open in a new tab. And finally, I want to add some towing classes to this as well. So let's tack on the class name attribute and we're going to apply text hyphen indigo hyphen 500. That's for the text color and also underline as well. Once we've done that, we just need to render the children prop inside the anchor tag as well. So then now we're rendering normal anchor tags if the href starts with HTTP. But if not, we're going to assume an internal link and we want to render a link component instead. So let's do that by adding another return down here to return that link component. And this will only ever be reached if the check above was false. If it was true, then the anchor tag was already returned. So we don't even get this far. Anyway, I'm going to start typing this link component and then click on the autoimp import when I see it to make sure it gets imported from next. Then same again, we want to set the href prop to be the href prop value that we got in this function. So, let's add that on. And then for the classes, I'm just going to copy the class name prop from the other anchor tag and paste those down here as well. Now, if you wanted to, you could style external links differently. Uh, for example, you might add a little arrow icon after the link just to indicate the link takes you away from the site, but for the sake of this video, I'm going to leave that off. Anyway, the only thing left we need to do is output the children prop within this link component now. So, let's do that down here. And I think that's pretty much everything that I want to do for this rich text content. The elements we don't register in this object, well, they're just going to render as normal elements without any custom classes or behavior. But these elements are going to be rendered according to the templates we've returned in these functions. Okay then. So now let's save the file, cross our fingers, and try this in a browser. All right, then. So let's click on this about link. And yeah, that looks loads better. And look, we can actually see the link, which is good. So, we have a H3 tag right here that looks nicer with a little border underneath it. We have the block quote which is styled a little nicer with this left border. The link purple which we can actually see and I think the rest is just as normal. But that looks loads better now than it did before. So, there we go my friends. That is the rich content component.