react-markdown

[![Build][badge-build-image]][badge-build-url] [![Coverage][badge-coverage-image]][badge-coverage-url] [![Downloads][badge-downloads-image]][badge-downloads-url] [![Size][badge-size-image]][badge-size-url]

React component to render markdown.

Feature highlights

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

Contents

• What is this?
• When should I use this?
• Install
• Use
• API
  • Markdown
  • MarkdownAsync
  • MarkdownHooks
  • defaultUrlTransform(url)
  • AllowElement
  • Components
  • ExtraProps
  • HooksOptions
  • Options
  • UrlTransform
• Examples
  • Use a plugin
  • Use a plugin with options
  • Use custom components (syntax highlight)
  • Use remark and rehype plugins (math)
• Plugins
• Syntax
• Compatibility
• Architecture
• Appendix A: HTML in markdown
• Appendix B: Components
• Appendix C: line endings in markdown (and JSX)
• Security
• Related
• Contribute
• License

What is this?

This package is a [React][] component that can be given a string of markdown that it’ll safely render to React elements. You can pass plugins to change how markdown is transformed and pass components that will be used instead of normal HTML elements.

• to learn markdown, see this [cheatsheet and tutorial][commonmark-help]
• to try out react-markdown, see [our demo][github-io-react-markdown]

When should I use this?

There are other ways to use markdown in React out there so why use this one? The three main reasons are that they often rely on dangerouslySetInnerHTML, have bugs with how they handle markdown, or don’t let you swap elements for components. react-markdown builds a virtual DOM, so React only replaces what changed, from a syntax tree. That’s supported because we use [unified][github-unified], specifically [remark][github-remark] for markdown and [rehype][github-rehype] for HTML, which are popular tools to transform content with plugins.

This package focusses on making it easy for beginners to safely use markdown in React. When you’re familiar with unified, you can use a modern hooks based alternative [react-remark][github-react-remark] or [rehype-react][github-rehype-react] manually. If you instead want to use JavaScript and JSX inside markdown files, use [MDX][github-mdx].

Install

This package is [ESM only][esm]. In Node.js (version 16+), install with [npm][npm-install]:

npm install react-markdown

In Deno with [esm.sh][esmsh]:

import Markdown from 'https://esm.sh/react-markdown@10'

In browsers with [esm.sh][esmsh]:

<script type="module">
  import Markdown from 'https://esm.sh/react-markdown@10?bundle'
</script>

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>)

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

---

GitHub에서 전체 내용 보기