How to Safely Render Markdown From a React Component

by author Fortune Ikechi

With react-markdown, you can safely render markdown and not have to rely on the dangerouslySetInnerHTML prop, instead React markdown uses a syntax tree to build a virtual DOM for your markdown.

Markdown is a lightweight markup language that is easy to learn and work with it, created to include basic tags, it helps to create editorial content easily. However, its important to note that React markdown does not support HTML by default and therefore prevents script injection, making it safer to use.

Script injection is a security vunerability that allows malicious code to the user interface element of an application, you can read more about it here.

Why use React markdown

There are many markdown component libraries available for use in React applications, some of which include react-markdown-editor-lite, commonmark-react-renderer and react-remarkable. These libraries although great all focus on dangerouslySetInnerHTML, however react-markdown uses a syntax tree to build the virtual DOM that allows for updating only the changing DOM instead of completely overwriting it. React markdown also supports CommonMark and has extensions to support custom syntax and a list of plugins to extend it’s features.

React markdown vs remark
react-markdown is a library that provides the React component to render the Markdown markup while remark is a markdown preprocessor built on micromark. It inspects, parses and transforms markdowns.

Getting Started with React markdown

In this section, we will build a markdown blog using react markdown, with this application, users can write an article in markdown which when completed can be previewed in plain text. First, let’s create a new project and install react-markdown

Initializing Project

To initialize a new react typescript project, run the command below

npx create-react-app react-markdown-blog --template typescript

In the code above, we initialized a new react typescript project with the application name “react-markdown-app”, this can be replaced with whatever name you choose.

Next, let’s install dependencies and start our application’s development server below

yarn add autoprefixer postcss-cli postcss tailwindcss moment react-markdown

In the code above, we installed the following dependencies, postcss-cli, postcss for transforming styles with JS plugins and help us lint our CSS and tailwindcss for our styling, react-markdown for rendering our markdown component, and moment for parsing our dates, autoprefixer for adding vendor prefixes to our CSS rules.

Next, we need to setup tailwindcss for our project, type the following command in your terminal to generate a tailwind config file in your project directory.

npx tailwind init tailwind.config.js

By default tailwindcss prevents markdown styles from displaying. To fix that, install a tailwind plugin @tailwindcss/typography according to documentation,

The @tailwindcss/typography plugin adds a set of customizable prose classes that you can use to add beautiful typographic defaults to any vanilla HTML, like the output you'd get after parsing some Markdown, or content you pull from a CMS.

Inside the @tailwindcss.config.js file, add the code below

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            color: "#FFF",
            a: {
              color: "#4798C5",
              "&:hover": {
                color: "#2c5282",
              },
            },
            h1: {
              color: "#FFF",
            },
            h2: {
              color: "#FFF",
            },
            h3: {
              color: "#FFF",
            },
            h4: { color: "#FFF" },
            em: { color: "#FFF" },
            strong: { color: "#FFF" },
            blockquote: { color: "#FFF" },
            code: { backgroundColor: "#1A1E22", color: "#FFF" },
          },
        },
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [require("@tailwindcss/typography")],
};

Run the below command to generate a postcss config file in your project directory

touch postcss.config.js

Add the code below in the file;

const tailwindcss = require('tailwindcss');
module.exports = {
    plugins: [
        tailwindcss('./tailwind.config.js'),
        require('autoprefixer')
    ],
};

Create a folder called styles in src and add 2 files main.css (where generated tailwind styles will enter) and tailwind.css for tailwind imports.

Inside tailwind.css, add the codes below

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Update your scripts in package.json to build tailwind styles when the dev server starts

"scripts": {
  "start": "npm run watch:css && react-scripts start",
  "build": "npm run watch:css && react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "watch:css": "postcss src/styles/tailwind.css -o src/styles/main.css"
}

Lastly, add main.css to src/index.ts, the file should like this;

import React from "react";
import ReactDOM from "react-dom";
import "./styles/main.css";
import "./index.css";
import App from "./App";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

To start our development server, let’s start our development server using the command below

yarn start

OR using NPM

npm start

Building Navbar Component

Here, we will create components for our applications, first navigate to your src folder and inside it, create a new folder named components, this will house all of our project components. Inside your components folder, create a new directory called Navbar, inside this directory, create a new file called Navbar.tsx.

Firstly, add react-router-dom for navigation within the app and two react-markdown plugins to extends react-markdown features; we’ll be passing them to the Markdown component.

yarn add react-router-dom remark-gfm rehype-raw

Inside this file, let’s create our Navbar with the code block below:

import { Link, NavLink } from "react-router-dom";
const Navbar = () => {
    return (
        <nav className="mt-6 w-10/12 mx-auto flex justify-between items-center">
            <Link
                style={{ fontStyle: "oblique" }}
                className="text-xl tracking-widest logo"
                to="/"
            >
                Markdown Blog
            </Link>
            <div className="flex-items-center">
                <NavLink
                    activeClassName="border-b-2"
                    className="mr-6 tracking-wider"
                    to="/write-article"
                    exact
                >
                    Write An Article
                </NavLink>
                <NavLink
                    activeClassName="border-b-2"
                    className="tracking-wider"
                    to="/profile"
                    exact
                >
                    Profile
                </NavLink>
            </div>
        </nav>
    );
};
export default Navbar;

In the code blog above, we created a function component called Navbar, inside it we created a Navbar component, giving our application a title, we also added links to a Profile page and to a page where user can write an article.

Next, we will create a blog card that will feature our blog posts, this will show each blog post written and we’d use react-markdown to render the articles in plain text with styles. Let’s do that in the section below.

Adding Helper functions

Before we build our BlogCard, we need to add some helperFunctions that will help us:

Delete, edit, save and fetch posts from localStorage (our DB).

Format the date of the post.

Truncate the post body so our BlogCard doesn’t get too big when the body is very lengthy.

Firstly, inside the src folder create a folder called utils, in there create a new file and name it helperFunctions.ts add the code block below.

import moment from "moment";

export const truncateText = (text: string, maxNum: number) => {
  const textLength = text.length;
  return textLength > maxNum ? `${text.slice(0, maxNum)}...` : text;
};

export const formatDate = (date: Date) => {
  return moment(date).format("Do MMM YYYY, h:mm:ss a");
};

Above, we have a function called textTruncate that accepts in two arguments; text and maxNum.
it checks if the text has a length greater than the maxNumber we want to display, if yes we remove the surplus and add ‘…’ else we return the text.

The second function; formatDate basically formats a date object passed to it to the format we want to display in our app. Let’s add more functions to manipulate our posts with below.

Create another file inside utils and name it server.ts it will contain the functions to add, delete, fetch and edit a post. Add the code below

import { IBlogPost } from "../components/BlogCard/BlogCard";

export const savePost = (post: Partial<IBlogPost>) => {
  if (!localStorage.getItem("markdown-blog")) {
    localStorage.setItem("markdown-blog", JSON.stringify([post]));
  } else {
    const posts = JSON.parse(localStorage.getItem("markdown-blog") as string);
    localStorage.setItem("markdown-blog", JSON.stringify([post, ...posts]));
  }
};

export const editPost = (newPostContent: IBlogPost) => {
  const posts: IBlogPost[] = JSON.parse(
    localStorage.getItem("markdown-blog") as string
  );
  const postIdx = posts.findIndex((post) => post.id === newPostContent.id);
  posts.splice(postIdx, 1, newPostContent);
  localStorage.setItem("markdown-blog", JSON.stringify(posts));
};

In the code we added above, savePost functions takes in an object of type BlogPost which we will create in our BlogCard component. It checks if we have saved any post to our browser’s localStorage from this app with the key markdown-blog, if **none is found we add the post to an array and save it to localStorage. Otherwise we fetch the posts we already have and include it before saving.

We have also added a function called editPost which we will use to edit posts, it takes in the newContent object which will contain updated post properties, in here we fetch all posts, find the index of the post we want to edit and splice it out and replace it with the newContent at that index in the array as seen in line 34. after splicing we save it back to locatStorage.

Let’s add the other two functions below.

export const getPosts = () => {
  if (!localStorage.getItem("markdown-blog")) {
    return [];
  } else {
    const posts = JSON.parse(localStorage.getItem("markdown-blog") as string);
    return posts;
  }
};

export const deletePost = (id: string) => {
  const posts: IBlogPost[] = JSON.parse(
    localStorage.getItem("markdown-blog") as string
  );
  const newPostList = posts.filter((post) => post.id !== id);
  localStorage.setItem("markdown-blog", JSON.stringify(newPostList));
};

getPost functions fetches our posts from localStorage and returns them if we have that post in localStorage or an empty array if we don’t.

deletePost takes in an id as an argument, fetches the all posts from loalStorage, filters out the one with the id passed to this function and saves the rest to localStorage.

Building Blog Card component

As we have now added our helper functions, let’s create a blog card component for our application, to do this we’d first create a typescript interface (which we will pass to our savePost and editPost functions created above) to define the type of each prop to be passed to the BlogCard component, next we will create our BlogCard component, let’s do that below

import { Link } from "react-router-dom";
import ReactMarkdown from "react-markdown";
import gfm from "remark-gfm";
import rehypeRaw from "rehype-raw";
import { formatDate, truncateText } from "../../utils/helperFunctions";
import { deletePost } from "../../utils/server";

export interface IBlogPost {
    id: string;
    title: string;
    url: string;
    date: Date;
    body: string;
    refresh?: () => void;
}
const BlogCard: React.FC<IBlogPost> = ({
    id,
    title,
    body,
    url,
    date,
    refresh,
}) => {
    const formattedDate = formatDate(date);
    const content = truncateText(body, 250);
    const handleDelete = () => {
        const yes = window.confirm("Are you sure you want to delete this article?");
        yes && deletePost(id);
        refresh && refresh();
    };

In the code above, we created an interface for our BlogCard component, imported React-Markdown and the plugins we installed earlier and also helper functions to delete the post, format the post date and truncate the post text.

gfm is a remark plugin that adds support for strikethrough, table, tasklist and URLs

rehypeRaw makes react-markdown parse html incase we pass html elements inbetween markdown text. This is dangerous and usually not adviceable as it defeats the purpose of react-markdown not rerendering html to prevent html injection but for the purpose of of learning we will use it.

Next, let’s complete our component with the code below:

return (
    <section
        style={{ borderColor: "#bbb" }}
        className="border rounded-md p-4 relative"
    >
        <div className="controls flex absolute right-4 top-3">
            <Link
                title="Edit this article"
                className="block mr-5"
                to={`/edit-article/${id}`}
            >
                <i className="far fa-edit" />
            </Link>
            <span
                role="button"
                onClick={handleDelete}
                title="Delete this article"
                className="block"
            >
                <i className="fas fa-trash hover:text-red-700" />
            </span>
        </div>
        <h3 className="text-3xl font-bold mb-3">{title}</h3>
        <div className="opacity-80">
            <ReactMarkdown
                remarkPlugins={[gfm]}
                rehypePlugins={[rehypeRaw]}
                className="prose"
                children={content}
            />
            &nbsp;
            <Link
                className="text-blue-500 text-sm underline hover:opacity-80"
                to={`${url}`}
            >
                Read more
            </Link>
        </div>
        <p className="mt-4">{formattedDate}</p>
    </section>
);
};
export default BlogCard;

Note that the blogpost body we want to render with react-markdown is passed to the children prop and the other plugins added. The className prose is from tailwind, we get it from the tailwindcss/typography plugin we installed and added to our tailwind config to provide support for markdown styles.

We will add a fontawesome CDN link so we can use fontawesome icons for delete and edit as we have in lines 12 and 13 of the bove code block.

Navigate to your index.html file in public folder and replace the file’s content with the code block below.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="Markdown Blog"
      content="A markdown blog built with React, TS and react-markdown"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!-- Fontawesome CDN link here -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
      integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer" />
      <!-- End of Fontawesome CDN link here -->
    <title>Markdown blog</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

This Card will preview each post, give a link to the user to view all contents of the post and from here a user can delete a post or navigate to edit-post page. Now that we’ve created this component, we will go ahead to create pages for our application using these components.

Building Home Page

The Home page will contain all the posts in the app, we will also add a ‘no data’ state for when there are no posts to show. To do this, first create a new folder called pages in our project src file, and inside it create another directory called home, in here create a new file called index.tsx.

// src/pages/home/index.tsx

import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import BlogCard, { IBlogPost } from "../../components/BlogCard/BlogCard";
import { getPosts } from "../../utils/server";

const Homepage = () => {
    const [articles, setArticles] = useState<IBlogPost[]>([]);
    const [refresh, setRefresh] = useState(false);

    useEffect(() => {
        const posts = getPosts();
        setArticles(posts);
    }, [refresh]);

In the code above, we imported the useEffect and useState from react, next we imported Link from react-router this will help us navigate to write an article page. We also imported our BlogCard component alongside IBlogPost interface, to render out each post from the array of posts. Finally, we imported the getPosts object from our utils directory.

Inside the useEffect hook, we are fetching all posts we have saved to localStorage and adding the array of posts to our component state (useState), we also created a state which will enable us to make the useEffect refetch posts whenever a post is deleted.

Next, let’s render our Home page using the code block below:

return (
        <div className="mt-8 mb-20 w-3/5 mx-auto">
            <h1 className="mb-6 text-xl">Welcome back, Fortune</h1>
            <section className="articles mt-4">
                {articles?.length ? (
                    articles.map((article) => (
                        <article key={article?.id} className="my-4">
                            <BlogCard
                                title={article?.title}
                                id={article?.id}
                                url={`/article/${article?.id}`}
                                body={article?.body}
                                date={article?.date}
                                refresh={() => setRefresh(!refresh)}
                            />
                        </article>
                    ))
                ) : (
                    <div className="mt-20 flex flex-col items-center justify-center">
                        <h2 className="text-2xl">No article right now.</h2>
                        <Link className="block text-blue-500 underline text-sm mt-6" to="/write-article">Add article</Link>
                    </div>
                )}
            </section>
        </div>
    );
};

export default Homepage;

In the code block above, we rendered our Home page with styles using tailwind classes, we mapped through the array of posts and rendered them with our BlogCard component and also added a no data state incase there are posts to render.

Building Post Page

In this section, we will create a page for a user to post a new blog post. Inside your pages directory, create a new folder called post and inside it create a new file named index.tsx, add the code block below:

import { useParams } from "react-router-dom";
import ReactMarkdown from "react-markdown";
import gfm from "remark-gfm";
import rehypeRaw from "rehype-raw";
import { formatDate } from "../../utils/helperFunctions";
import { getPosts } from "../../utils/server";
import { IBlogPost } from "../../components/BlogCard/BlogCard";

We have now imported different components we’d need for building our page. Next, we will be getting an id param from our url with useParams, rendering our post body with ReactMarkdown. let’s do that in the code block below

const Blog = () => {
        const { id } = useParams<{ id: string }>();

        const post = getPosts().find((post: IBlogPost) => post.id === id);

In the code block above, we created a Blog component and added retrieving the post id from the url to get the post from all posts (line 4). Next, we will render our post content below

return (
        <div className="w-4/5 mx-auto mt-16 mb-24">
            {post ? (
                <>
                    <header
                        style={{ background: "#1C313A" }}
                        className="rounded-md mb-10 max-w-9/12 py-12 px-20"
                    >
                        <h1 className="text-2xl text-center font-semibold uppercase">
                            {post?.title}
                        </h1>
                        <p className="mt-4 text-sm text-center">{formatDate(post?.date as Date)}</p>
                    </header>

                    <ReactMarkdown
                      className="prose"
                      remarkPlugins={[gfm]}
                      rehypePlugins={[rehypeRaw]}
                      children={post?.body as string}
                    />
                </>
            ) : (
                <h3>Post not found!</h3>
            )}
        </div>
    );
};
export default Blog;

In the code above, we are checking if a post with the id passed to the url is found, if found we show the post title, date and render the text with ReactMarkdown. if the post is not found we render ‘post not found’. If done correctly, your application should look like the image below

Open Source Session Replay

Debugging a web application in production may be challenging and time-consuming. OpenReplay is an Open-source alternative to FullStory, LogRocket and Hotjar. It allows you to monitor and replay everything your users do and shows how your app behaves for every issue.
It’s like having your browser’s inspector open while looking over your user’s shoulder.
OpenReplay is the only open-source alternative currently available.

Happy debugging, for modern frontend teams - Start monitoring your web app for free.

Adding Write-A-Post Page

In this section, we will create a page for writing and editing a post, To do this, create a new folder write inside your pages folder and inside it create a index.tsx file and add the code snippet below

import { useEffect } from "react";
import { useState } from "react";
import { useHistory, useParams } from "react-router";
import { editPost, getPosts, savePost } from "../../utils/server";
import { IBlogPost } from "../../components/BlogCard/BlogCard";

const WriteAnArticle = () => {
    const { id } = useParams<{ id: string }>();
    const history = useHistory();
    const [title, setTitle] = useState("");
    const [body, setBody] = useState("");

    useEffect(() => {
      if (id) {
          const post = getPosts().find((post: IBlogPost) => post.id === id);
          post && setTitle(post.title);
          post && setBody(post.body);
      }
    }, [id]);

This component handles both editing and adding posts, so in case of edit we use the id of the post which we will get with useParams from the url of the page. In the code block above, we initializing a history variable from useHistory with which we will navigate the user to the home page after editing or adding new posts. We also have state to hold our post title and body from inputs.

In the useEffect, if there’s an id in the URL we’re getting the post to be editted from the array of posts and setting it to our component states so that the values show up in our inputs.

Next, we will create a submitHandler function to enable the user to submit a post or save the edits performed.

const submitHandler = (e: { preventDefault: () => void }) => {
        e.preventDefault();

        const post = getPosts().find((post: IBlogPost) => post.id === id);
        if (!id) {
            const post = {
                title,
                body,
                date: new Date(),
                id: new Date().getTime().toString(),
            };
            savePost(post);
        } else if (id && post) {
            const updatedPost = {
                ...post,
                title,
                body,
            };
           editPost(updatedPost);
        }
        history.push("/");
    };

In the code above, we are handling form submit, if the id deosn’t exist we save a new post with savePost helper function, using the title and body from the form and the id and date as the current timestamp of that moment. else we update the post title, body.

We will render our component body below;

return (
        <div className="w-3/5 mx-auto mt-12 mb-28">
            <h3 className="text-3xl text-center capitalize mb-10 tracking-widest">
                Write a post for your blog from here
            </h3>
            <form onSubmit={submitHandler} className="w-10/12 mx-auto">
                <input
                    className="w-full px-4 mb-6 block rounded-md"
                    type="text"
                    value={title}
                    onChange={(e) => setTitle(e.target.value)}
                    placeholder="Enter article title"
                />
                <textarea
                    className="w-full px-4 pt-4 block rounded-md"
                    name="post-body"
                    id="post-body"
                    value={body}
                    onChange={(e) => setBody(e.target.value)}
                    placeholder="Enter article body. you can use markdown syntax!"
                />
                <button
                    title={!body || !title ? "Fill form completely" : "Submit form"}
                    disabled={!body || !title}
                    className="block rounded mt-8"
                    type="submit"
                >
                    Submit Post
                </button>
            </form>
        </div>
    );
};
export default WriteAnArticle;

If done correctly, our application should look like the image below

Concluding our Application

To conclude our application, navigate to your App.tsx file in our src folder and add the code snippet below

import { BrowserRouter, Switch, Route } from "react-router-dom";
import Navbar from "./components/Navbar/Navbar";
import Post from "./pages/post";
import Homepage from "./pages/home";
import WriteAnArticle from "./pages/write";
import Profile from "./pages/profile";
const App = () => {
    return (
        <>
            <BrowserRouter>
                <Navbar />
                <Switch>
                    <Route path="/" exact component={Homepage} />
                    <Route path="/article/:id" exact component={Post} />
                    <Route path="/write-article" exact component={WriteAnArticle} />
                    <Route path="/edit-article/:id" exact component={WriteAnArticle} />
                </Switch>
            </BrowserRouter>
        </>
    );
};
export default App;

The code above defines routes for all pages in our app,

/ will navigate to the homepage

/article/:id will navigate to a Post page where we view a post completely. It’s a dynamic route and we will get the id from our url in the Post page.

/write-article will navigate to write article page

/edit-article/:id will take us to edit post page

We also added our Navbar component, if done correctly our application homepage should look like the image below.

You can now go ahead and test the app with markdown syntax and extend it if you want.

Conclusion

In this tutorial, we looked at markdown, react-markdown, we learned how to install and render markdown safely with React markdown. We also reviewed how to use remark-gfm to extend react-markdown features and also how to make markdown styles display correcty in apps using tailwind.

You can learn more by looking at react markdown’s official documentation.

Categories:

React

Tags:

React Markdown Tutorial

How to build powerful tables in React using the React Table package

Implementing tables using reactjs

Next.js Authentication with Netlify Identity

Websites To Learn Programming For Free

C# For Beginners - Lesson 6: Strings

Laravel Fluent Str - 48 Methods [🚀 10 MINUTES!]

Difference Between React And Angular. A Comparison Guide For 2021

Your Essential Guide To Map Built-in Object In Javascript

How to Safely Render Markdown From a React Component

Categories:

Tags:

Related Posts