How to use the marked markdown library in React?

Estimated read time 1 min read

In React, you can use the marked library to parse and render Markdown content. You can install the marked library using NPM or Yarn.

Here’s an example of how to use the marked library in React:

import React from 'react';
import marked from 'marked';

function MyComponent() {
  const markdown = `
    # My Component

    This is some **bold** text.

    This is a [link](https://example.com).
  `;

  const html = marked(markdown);

  return (
    <div>
      <h1>My Component</h1>
      <div dangerouslySetInnerHTML={{ __html: html }}></div>
    </div>
  );
}

export default MyComponent;

In this example, we’re defining a MyComponent that contains a Markdown string in the markdown variable. We’re using the marked library to parse the Markdown string and convert it to HTML.

We’re then rendering the HTML content in a <div> element using the dangerouslySetInnerHTML prop. We’re using the __html key to set the HTML content as a string.

By using the marked library and the dangerouslySetInnerHTML prop, you can easily render Markdown content in React.

You May Also Like

More From Author

+ There are no comments

Add yours

Leave a Reply