react-markdown

React component to render markdown.

Feature highlights

• [x] safe by default (no dangerouslySetInnerHTML or XSS attacks)
• [x] components (pass your own component to use instead of <h2> for ## hi)
• [x] plugins (many plugins you can pick and choose from)
• [x] compliant (100% to CommonMark, 100% to GFM with a plugin)

Contents

• What is this?
• When should I use this?
• Install
• Use
• API
  • Markdown
  • defaultUrlTransform(url)
  • AllowElement
  • Components
  • ExtraProps
  • Options
  • UrlTransform

Use

A basic hello world:

import React from 'react'
import {createRoot} from 'react-dom/client'
import Markdown from 'react-markdown'

const markdown = '# Hi, *Pluto*!'

createRoot(document.body).render(<Markdown>{markdown}</Markdown>)

Show equivalent JSX

<h1>
  Hi, <em>Pluto</em>!
</h1>

Here is an example that shows how to use a plugin (remark-gfm, which adds support for footnotes, strikethrough, tables, tasklists and URLs directly):

import React from 'react'
import {createRoot} from 'react-dom/client'
import Markdown from 'react-markdown'
import remarkGfm from 'remark-gfm'

const markdown = `Just a link: www.nasa.gov.`

createRoot(document.body).render(
  <Markdown remarkPlugins={[remarkGfm]}>{markdown}</Markdown>
)