Embed Medium Posts in your React App

This article will show you how to embed Medium blog posts in your React application, using State and Effect Hooks.

Since graduation from Flatiron School’s Software Engineering Bootcamp, I’ve been working on putting together my personal website. In addition to showcasing my projects, I wanted to have my Medium posts available. In this article, I will walk you through embedding your blog posts on your website but if you would like to learn how to deploy your website for free you can view my previous post here.

Getting Started

Medium allows access to RSS feeds for publications through “https://medium.com/feed/@your-medium-username", however, the RSS feed needs to be converted to JSON. The following URL has already done that (if you would like to do it yourself click here).

mediumURL = "https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/@your-medium-username";

Make sure to replace {your-medium-username} with your Medium username, it would look like this:

mediumURL = "https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/@cortezd334";

Setting up State

We will be using the State Hook to initialize our profile and blog. We’ll declare a profile state,name set to your name, and profileImage and profileUrl to empty quotation marks. When we make our fetch these values will be replaced with the correct strings. For our blog state, set itemto an empty array, isLoadingto true, and errorto null. Remember to addimport React, { useState } from ‘react';to the top of your component.

Axios or Fetch?

Next, we have to fetch our blog posts. I learned to use the fetch() method but while researching I found Axios, which is a JavaScript library, used to make HTTP requests. I will show you how to use both, but just know that fetch isn’t as widely supported among old browsers (if you would like to learn more here’s a guide by Solomon Ayoola).

Axios

If you choose to use Axios, you first must install it. Depending on whether you’re using npm or yarn, enter the following in your terminal:

$ npm install axios
OR
$ yarn add axios

Once installed you’ll want to type the following:

• image is your Medium profile picture.
• link is the URL to your Medium page.
• blogs is an array of your blog posts and their corresponding information.
• In posts we filter through blogs and check to see if the categories array is larger than 0.*

Once those variables are set, we can update our state for profile and blog. *Why filter throughblogs rather than just saving blogs to item? Medium saves blogs and responses in the same array, but the differentiating factor is categories. When you publish your post, you have the option to add tags, these tags are saved in categories. Because of this responses won’t show up once you filter, but you also have to make sure all your blog posts have at least one tag or they won’t display either.

Fetch

If you prefer Fetch, nothing needs to be installed! This is how your fetch should look:

Same as above:

• image is your Medium profile picture.
• link is the URL to your Medium page.
• blogs is an array of your blog posts and their corresponding information.
• In posts we filter through blogs and check to see if the categories array is larger than 0.*

Rendering to the Page

Now that we have the information we need, in the Blog Component you can add the following:

• While blog.isLoadingis true ‘Loading..’ will display, otherwise, it will call on haveBlogs.
• In haveBlogs, we first check to see if blog.item exists. If it does, then we map through blog.item to display all the blogs in the array.
• post.thumbnailis the image of the post, profile.profileImageis your profile image (which we are using as a link to your Medium page), and post.titleis the title of your post (which is a link to the blog post itself).

ToText

To get rid of all the characters and display a preview of your post write this function. It can either be in a separate file and imported or within your component.

Avoid Runoff

To avoid the words extending past the card, like this:

You can add the following to the CSS of your text:

• max-height limits the length that you want to be displayed.
• overflow:hiddenhides any text that exceeds themax-heightspecified.

Conclusion

Although it may seem hard to do, it is possible to include your Medium blog posts on your website. It is just a matter of converting RSS feed to JSON, fetching the information, setting and updating state, rendering to the page, and styling. There is additional information you can add such as, name (which we set at the beginning but I forgot to incorporate), the date the article was published, categories, etc. Choosing what to include, or not to, is up to you! Also, I used custom CSS to style the cards, however, you can import Bootstrap or another framework to make it easier.

I hope this tutorial was helpful! Don’t hesitate to ask questions, give me any suggestions, or leave a comment!