Building Beautiful Markdown-Rendered Content with Markdown Parser React

Are you looking for a simple and efficient way to render Markdown content in your React project? Look no further than Markdown Parser React!

Markdown Parser React is a lightweight, flexible, and easy-to-use Markdown renderer for React. Built with TypeScript, it supports syntax highlighting and can be easily integrated into any React project. In this article, we'll go over how to use Markdown Parser React and its key features.

Installation

To get started with Markdown Parser React, you can install it via npm or yarn.

npm install markdown-parser-react
#or
yarn add markdown-parser-react

Usage

To use Markdown Parser React, import the Markdown component and pass it the Markdown text you want to render. Here's an example:

import Markdown from 'markdown-parser-react';

function MyComponent() {
  const markdown = `# Hello, world!

This is **Markdown Parser React**, a *flexible* Markdown renderer.

## Syntax Highlighting

\`\`\`javascript
const message = 'Hello, world!';
console.log(message);
\`\`\``;

  return <Markdown content={markdown} />;
}

That's it! The Markdown component will render the Markdown content as HTML.

Options

Markdown Parser React provides several options to customise the behavioiur of the Markdown parser.

langPrefix
The langPrefix option specifies the prefix to use for language classes in code blocks. The default value is 'language-'.

Here's an example:

import Markdown from 'markdown-parser-react';

function MyComponent() {
  const markdown = `# Hello, world!

This is **Markdown Parser React**, a *flexible* Markdown renderer.

## Syntax Highlighting

\`\`\`javascript
const message = 'Hello, world!';
console.log(message);
\`\`\``;

  const parseOptions = {
    langPrefix: 'lang-',
  };

  return <Markdown content={markdown} options={parseOptions} />;
}

Usage with Next.js

If you're using Next.js, you may encounter the "Text content does not match server-rendered HTML" error. To avoid this issue, you can use next/dynamic to dynamically import the Markdown component, ensuring that it is only rendered on the client-side.

Here's how to use Markdown with Next.js:

import dynamic from 'next/dynamic';
import Markdown from 'markdown-parser-react';

const DynamicMarkdown = dynamic(() => import('markdown-parser-react').then((markdown) => markdown), {
  ssr: false,
});

interface MyComponentProps {
  content: string;
  options?: {
    langPrefix?: string;
  };
}

export const MyComponent: React.FC<MyComponentProps> = ({ content, options }) => {
  return (
    <div>
      <DynamicMarkdown content={content} options={options} />
    </div>
  );
};

By using the next/dynamic function and passing ssr as false, we ensure that the Markdown component is only rendered on the client-side, preventing the mismatch error between server-rendered and client-rendered HTML in Next.js projects.

Conclusion

Markdown Parser React is a fantastic tool for rendering Markdown content in React. With its simple API and flexible options, you can easily integrate it into any React or Next.js project. Give it a try and let us know what you think!