React Markdown + JOY UI

Table of Contents

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

About This Post

This post will give you an overview of Joy UI and also Markdown. Also, it'll help you render the markdown fast and nicely in your React and Joy UI projects.

Using Markdown in your project

Markdown is a lightweight markup language for creating formatted text using a plain-text editor. (Wikipedia)

Using 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.

Using Joy UI in your project

Joy UI is an open-source React component library that implements MUI's own design principles. It's comprehensive and can be used in production out of the box. (MUI)

Joy UI is a less complicated alternative to the MUI. It's highly customizable, easy to learn, and developer-friendly.

About "jui-markdown" package

"jui-markdown" uses "markdown-to-jsx" and "Joy UI". I found these two working together really simple and nice. This package will be great for you if you use Joy UI (From MUI). Also it is really lightweight, about just 10.00Kb (Unpacked size is 58.1Kb).

Some of "jui-markdown" features

• Headings
• Code highlight and language detection
• Inline code highlight
• Blockquote component
• Joy UI 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 jui-markdown

# with yarn
yarn add jui-markdown

Then pass the markdown as children:

import React from 'react';
import { JuiMarkdown } from 'jui-markdown';
// You can also use
// import JuiMarkdown from 'jui-markdown';
// But the first approach is recommended.

const App = () => {
  return <JuiMarkdown>{`# Hello markdown!`}</JuiMarkdown>;
};

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.