React Markdown + MUI v5 (Material-UI)

Table of Contents

• About this post
• Using Markdown in your project
• About "mui-markdown" package
• Some of "mui-markdown" features
• Package usage
• Documentations

About This Post

Are you going to use markdown in your React web app? In this post, I want to introduce my new package to you. That will help you to render the markdown fast and nicely.

Using Markdown in your project

As you know, with MD or MDX you can write rich formatted content real quick, and it's pretty readable even before you convert it to HTML. There are also some other benefits that you can read about them as well.
So, if we are all in the same boat, chances are that like me, you need to use markdown in almost every single project. Even though you can find some npm or yarn packages that help you to render markdown as you wish, almost every time you need to configure that or write some extra CSS to gain the style you want.

About "mui-markdown" package

"mui-markdown" uses "markdown-to-jsx" and "mui". I found these two working together really simple and nice. This package will be great for you if you use MUI (Formerly Material-UI). Also it is really lightweight, just 11.70Kb (Unpacked size is 87.1Kb).

Some of "mui-markdown" features

• Code highlight and language detect
• Inline code highlight
• Blockquote component
• MUI button component support
• Nice Links
• Flexible and Overridable

Package usage

The package is available on npm and yarn.

To install it, simply run:

# with npm
npm i mui-markdown

# with yarn
yarn add mui-markdown

Then pass the markdown as children:

import React from 'react';
import MuiMarkdown from 'mui-markdown';

import md from './myMarkdown.md';

const App = () => {
  return(
      <MuiMarkdown>{md}</MuiMarkdown>;
  )
};

export default App;

Docs

To get more familiar with this package you can read the documentation on GitHub or NPM.

Hi! I'm Hosein Pouyanmehr. I enjoy sharing what I learn and what I find interesting. Let's connect on LinkedIn.

See my code interests on GitHub.