I want to take a different approach. One, because I think it will look best, but also so that you can see the other side of working with HTML as strings because this is something you're gonna have to do pretty often.

So, in our index page here, I do not want to simply render out this content as HTML. And the reason for that is because, imagine that you have a piece of content, kinda like our content page right here, that has all of these paragraph tags.

If we try to render this as HTML, you're gonna have blog posts on this summary page that are gonna look really weird. You're gonna have headings, you're gonna have bold and italics, and paragraph tags, and that's not really what I'm wanting to go for. I want this to simply be a set of blog links with summaries.

So, I don't want to render any HTML, I actually want to do the opposite. I want to reach into this set of strings, this HTML code, and I want to take the tags out and then I want to create summaries. And so we're going to walk through, in this guide, how to install the libraries that are going to allow us to do this, and then in the next guide we're gonna implement them.

So let's open up npmjs.com and let's go to the first one. The first one is called striptags, and it says this is a PHP implementation, or it's an implementation of PHP's very popular striptags module, except it's built for node.

npm i striptags

And what this allows you to do, if you look at the documentation here, is you can pass in a string of HTML and then you can also define which tags you want, which ones you don't, so you can pick and choose what you want to put in there.

So say you have a situation where you would want to allow image tags, or bold tags, but you don't want any other ones. This allows you to whitelist or blacklist the items that you don't want to work with. So this is really helpful, this is a great tool. I use this quite a bit whenever I'm working with HTML type of content that I may not want to render.

So let's use this, this is gonna be the first one that I want to pick out. And the second one is going to be called truncate. So let me pull the truncate out and what truncate does is it allows you to, and it's not actually just truncate by itself, it is react-truncate, very important.

So if you click on react-truncate here, you'll see that this actually gives us a component.

So this is a traditional react component that can take props and this allows us to build the summaries for us. Now we could do this from scratch, but this is a pretty simple library.

It's not going to add a complex dependency or anything like that. It's a pretty easy library to work with where we can simply wrap our content inside of this truncate component here, pass in how many lines, and then it even has cool little tools like being able to implement a read more link or anything like that.

The kind of things you'd expect in a summary generator, and so we're gonna implement both of these. So, let's add NPM install, react-truncate, and also striptags, spelled out just like this. So if you open up Visual Studio Code and open up the terminal, you can type both of these in on the same line. So react-truncate and then striptags, just like this.

npm i react-truncate

And then run that, and what that's going to do is bring in both of those node modules and we're going to be able to work with those. Now while that's loading, let me talk about how I try to make a decision if I want to build a feature from scratch or if I want to bring in some type of library that would be helpful.

So, if you can find libraries that are well maintained, they are very popular and well supported, then that is a good option. That means that you're probably not gonna run into a situation either that has a library with a security vulnerability or something where it may work for certain versions of react or whatever type of framework you're using, but won't work for later ones because they didn't update the code.

That's usually the type of one I want to go with, is one that's nice and maintained and I can be confident that it's gonna work not only today but also down the road.

The other thing that I look for is a type of library that is relatively straightforward to implement. It's part of the reason why I love tools like React Router and different libraries like that, because it's very declarative. You can take a look at their components and it's clear on exactly what's happening.

Now a few, kind of edge cases I would say, would be tools like Draft.js. Draft.js is a very complex library. That's a situation where you simply wouldn't want to build all that type of functionality from scratch.

And so instead, what you do is you find a partner, in this case, it's someone like Facebook who's massive and has all kinds of developers building these great open source tools, and you can be pretty confident that they're gonna maintain that for an extended period of time.

So if it's a component that you simply don't have the bandwidth to go and create yourself, then that works. At the end of the day though, you really take on a case by case basis. So both of these are installed, and you can check in your package.json to make sure that they are.

And so now that we have those libraries installed, in the next guide I'm going to go through and show you how you can implement these so we can create summaries and pull out all of the HTML code and all of those tags so that we have some great summaries on our index page.

Resources

• Source code