Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
react-markdown
Advanced tools
The react-markdown npm package is a markdown renderer for React applications. It allows you to take Markdown content and render it as React components. This is useful for content-driven applications, such as blogs or documentation sites, where you want to allow content creators to write in Markdown and then display that content within your React application.
Rendering Markdown
This feature allows you to render standard Markdown text as React components. The example code shows how to import the ReactMarkdown component and use it to render a simple piece of Markdown text.
import React from 'react';
import ReactMarkdown from 'react-markdown';
const markdown = '# Hello, *world*!';
function App() {
return <ReactMarkdown>{markdown}</ReactMarkdown>;
}
export default App;
Custom Renderers
This feature allows you to define custom renderers for different Markdown elements. In the example, a custom renderer is provided for 'h1' elements, which renders them with a blue color.
import React from 'react';
import ReactMarkdown from 'react-markdown';
const markdown = '# Hello, *world*!';
function HeadingRenderer(props) {
return <h1 style={{ color: 'blue' }}>{props.children}</h1>;
}
function App() {
return (
<ReactMarkdown
components={{
h1: HeadingRenderer
}}
>
{markdown}
</ReactMarkdown>
);
}
export default App;
Inline HTML and Skip HTML
This feature allows you to include or exclude inline HTML within your Markdown content. The example code demonstrates how to skip rendering inline HTML by using the 'skipHtml' prop.
import React from 'react';
import ReactMarkdown from 'react-markdown';
const markdown = 'This is a paragraph with <span style="color: red;">inline HTML</span>.';
function App() {
return (
<ReactMarkdown skipHtml>
{markdown}
</ReactMarkdown>
);
}
export default App;
Plugins
This feature allows you to extend the functionality of react-markdown with plugins. The example code shows how to use the 'remark-gfm' plugin to add support for GitHub Flavored Markdown (GFM) task lists.
import React from 'react';
import ReactMarkdown from 'react-markdown';
import gfm from 'remark-gfm';
const markdown = 'This supports GitHub Flavored Markdown (GFM)\n\n- [ ] todo\n- [x] done';
function App() {
return <ReactMarkdown remarkPlugins={[gfm]}>{markdown}</ReactMarkdown>;
}
export default App;
Marked is a low-level markdown compiler for parsing markdown without caching or blocking for long periods of time. It is less React-specific than react-markdown and requires additional work to integrate with React.
Remarkable is a highly configurable markdown parser and compiler. It offers similar functionality to react-markdown but is not designed specifically for React and does not render React components out of the box.
markdown-to-jsx is another React component that lets you render Markdown as React components. It is similar to react-markdown but offers a simpler API with less configurability, which might be preferable for simpler use cases.
React component to render markdown.
dangerouslySetInnerHTML
or XSS attacks)<h2>
for ## hi
)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.
react-markdown
, see our demoThere 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, specifically remark for
markdown and 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
or rehype-react
manually.
If you instead want to use JavaScript and JSX inside markdown files, use
MDX.
This package is ESM only. In Node.js (version 16+), install with npm:
npm install react-markdown
In Deno with esm.sh
:
import Markdown from 'https://esm.sh/react-markdown@9'
In browsers with esm.sh
:
<script type="module">
import Markdown from 'https://esm.sh/react-markdown@9?bundle'
</script>
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>
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>
)
<p>
Just a link: <a href="http://www.nasa.gov">www.nasa.gov</a>.
</p>
This package exports the following identifier:
defaultUrlTransform
.
The default export is Markdown
.
Markdown
Component to render markdown.
options
(Options
)
— propsReact element (JSX.Element
).
defaultUrlTransform(url)
Make a URL safe.
url
(string
)
— URLSafe URL (string
).
AllowElement
Filter elements (TypeScript type).
node
(Element
from hast
)
— element to checkindex
(number | undefined
)
— index of element
in parent
parent
(Node
from hast
)
— parent of element
Whether to allow element
(boolean
, optional).
Components
Map tag names to components (TypeScript type).
import type {Element} from 'hast'
type Components = Partial<{
[TagName in keyof JSX.IntrinsicElements]:
// Class component:
| (new (props: JSX.IntrinsicElements[TagName] & ExtraProps) => JSX.ElementClass)
// Function component:
| ((props: JSX.IntrinsicElements[TagName] & ExtraProps) => JSX.Element | string | null | undefined)
// Tag name:
| keyof JSX.IntrinsicElements
}>
ExtraProps
Extra fields we pass to components (TypeScript type).
node
(Element
from hast
, optional)
— original nodeOptions
Configuration (TypeScript type).
allowElement
(AllowElement
, optional)
— filter elements;
allowedElements
/ disallowedElements
is used firstallowedElements
(Array<string>
, default: all tag names)
— tag names to allow;
cannot combine w/ disallowedElements
children
(string
, optional)
— markdownclassName
(string
, optional)
— wrap in a div
with this class namecomponents
(Components
, optional)
— map tag names to componentsdisallowedElements
(Array<string>
, default: []
)
— tag names to disallow;
cannot combine w/ allowedElements
rehypePlugins
(Array<Plugin>
, optional)
— list of rehype plugins to useremarkPlugins
(Array<Plugin>
, optional)
— list of remark plugins to useremarkRehypeOptions
(Options
from
remark-rehype
, optional)
— options to pass through to remark-rehype
skipHtml
(boolean
, default: false
)
— ignore HTML in markdown completelyunwrapDisallowed
(boolean
, default: false
)
— extract (unwrap) what’s in disallowed elements;
normally when say strong
is not allowed, it and it’s children are dropped,
with unwrapDisallowed
the element itself is replaced by its childrenurlTransform
(UrlTransform
, default:
defaultUrlTransform
)
— change URLsUrlTransform
Transform URLs (TypeScript type).
url
(string
)
— URLkey
(string
, example: 'href'
)
— property namenode
(Element
from hast
)
— element to checkTransformed URL (string
, optional).
This example shows how to use a remark plugin.
In this case, remark-gfm
, which adds support for 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 = `A paragraph with *emphasis* and **strong importance**.
> A block quote with ~strikethrough~ and a URL: https://reactjs.org.
* Lists
* [ ] todo
* [x] done
A table:
| a | b |
| - | - |
`
createRoot(document.body).render(
<Markdown remarkPlugins={[remarkGfm]}>{markdown}</Markdown>
)
<>
<p>
A paragraph with <em>emphasis</em> and <strong>strong importance</strong>.
</p>
<blockquote>
<p>
A block quote with <del>strikethrough</del> and a URL:{' '}
<a href="https://reactjs.org">https://reactjs.org</a>.
</p>
</blockquote>
<ul className="contains-task-list">
<li>Lists</li>
<li className="task-list-item">
<input type="checkbox" disabled /> todo
</li>
<li className="task-list-item">
<input type="checkbox" disabled checked /> done
</li>
</ul>
<p>A table:</p>
<table>
<thead>
<tr>
<th>a</th>
<th>b</th>
</tr>
</thead>
</table>
</>
This example shows how to use a plugin and give it options.
To do that, use an array with the plugin at the first place, and the options
second.
remark-gfm
has an option to allow only double tildes for
strikethrough:
import React from 'react'
import {createRoot} from 'react-dom/client'
import Markdown from 'react-markdown'
import remarkGfm from 'remark-gfm'
const markdown = 'This ~is not~ strikethrough, but ~~this is~~!'
createRoot(document.body).render(
<Markdown remarkPlugins={[[remarkGfm, {singleTilde: false}]]}>
{markdown}
</Markdown>
)
<p>
This ~is not~ strikethrough, but <del>this is</del>!
</p>
This example shows how you can overwrite the normal handling of an element by
passing a component.
In this case, we apply syntax highlighting with the seriously super amazing
react-syntax-highlighter
by
@conorhastings:
import React from 'react'
import {createRoot} from 'react-dom/client'
import Markdown from 'react-markdown'
import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter'
import {dark} from 'react-syntax-highlighter/dist/esm/styles/prism'
// Did you know you can use tildes instead of backticks for code in markdown? ✨
const markdown = `Here is some JavaScript code:
~~~js
console.log('It works!')
~~~
`
createRoot(document.body).render(
<Markdown
children={markdown}
components={{
code(props) {
const {children, className, node, ...rest} = props
const match = /language-(\w+)/.exec(className || '')
return match ? (
<SyntaxHighlighter
{...rest}
PreTag="div"
children={String(children).replace(/\n$/, '')}
language={match[1]}
style={dark}
/>
) : (
<code {...rest} className={className}>
{children}
</code>
)
}
}}
/>
)
<>
<p>Here is some JavaScript code:</p>
<pre>
<SyntaxHighlighter language="js" style={dark} PreTag="div" children="console.log('It works!')" />
</pre>
</>
This example shows how a syntax extension (through remark-math
)
is used to support math in markdown, and a transform plugin
(rehype-katex
) to render that math.
import React from 'react'
import {createRoot} from 'react-dom/client'
import Markdown from 'react-markdown'
import rehypeKatex from 'rehype-katex'
import remarkMath from 'remark-math'
import 'katex/dist/katex.min.css' // `rehype-katex` does not import the CSS for you
const markdown = `The lift coefficient ($C_L$) is a dimensionless coefficient.`
createRoot(document.body).render(
<Markdown remarkPlugins={[remarkMath]} rehypePlugins={[rehypeKatex]}>
{markdown}
</Markdown>
)
<p>
The lift coefficient (
<span className="katex">
<span className="katex-mathml">
<math xmlns="http://www.w3.org/1998/Math/MathML">{/* … */}</math>
</span>
<span className="katex-html" aria-hidden="true">
{/* … */}
</span>
</span>
) is a dimensionless coefficient.
</p>
We use unified, specifically remark for markdown and rehype for HTML, which are tools to transform content with plugins. Here are three good ways to find plugins:
awesome-remark
and awesome-rehype
— selection of the most awesome projectsremark-plugin
and rehype-plugin
topics
— any tagged repo on GitHubreact-markdown
follows CommonMark, which standardizes the differences between
markdown implementations, by default.
Some syntax extensions are supported through plugins.
We use micromark
under the hood for our parsing.
See its documentation for more information on markdown, CommonMark, and
extensions.
This package is fully typed with TypeScript.
It exports the additional types
AllowElement
,
ExtraProps
,
Components
,
Options
, and
UrlTransform
.
Projects maintained by the unified collective are compatible with maintained versions of Node.js.
When we cut a new major release, we drop support for unmaintained versions of
Node.
This means we try to keep the current release line, react-markdown@^9
,
compatible with Node.js 16.
They work in all modern browsers (essentially: everything not IE 11). You can use a bundler (such as esbuild, webpack, or Rollup) to use this package in your project, and use its options (or plugins) to add support for legacy browsers.
react-markdown
+----------------------------------------------------------------------------------------------------------------+
| |
| +----------+ +----------------+ +---------------+ +----------------+ +------------+ |
| | | | | | | | | | | |
markdown-+->+ remark +-mdast->+ remark plugins +-mdast->+ remark-rehype +-hast->+ rehype plugins +-hast->+ components +-+->react elements
| | | | | | | | | | | |
| +----------+ +----------------+ +---------------+ +----------------+ +------------+ |
| |
+----------------------------------------------------------------------------------------------------------------+
To understand what this project does, it’s important to first understand what
unified does: please read through the unifiedjs/unified
readme (the
part until you hit the API section is required reading).
react-markdown
is a unified pipeline — wrapped so that most folks don’t need
to directly interact with unified.
The processor goes through these steps:
react-markdown
typically escapes HTML (or ignores it, with skipHtml
)
because it is dangerous and defeats the purpose of this library.
However, if you are in a trusted environment (you trust the markdown), and
can spare the bundle size (±60kb minzipped), then you can use
rehype-raw
:
import React from 'react'
import {createRoot} from 'react-dom/client'
import Markdown from 'react-markdown'
import rehypeRaw from 'rehype-raw'
const markdown = `<div class="note">
Some *emphasis* and <strong>strong</strong>!
</div>`
createRoot(document.body).render(
<Markdown rehypePlugins={[rehypeRaw]}>{markdown}</Markdown>
)
<div className="note">
<p>
Some <em>emphasis</em> and <strong>strong</strong>!
</p>
</div>
Note: HTML in markdown is still bound by how HTML works in CommonMark. Make sure to use blank lines around block-level HTML that again contains markdown!
You can also change the things that come from markdown:
<Markdown
components={{
// Map `h1` (`# heading`) to use `h2`s.
h1: 'h2',
// Rewrite `em`s (`*like so*`) to `i` with a red foreground color.
em(props) {
const {node, ...rest} = props
return <i style={{color: 'red'}} {...rest} />
}
}}
/>
The keys in components are HTML equivalents for the things you write with
markdown (such as h1
for # heading
).
Normally, in markdown, those are: a
, blockquote
, br
, code
, em
, h1
,
h2
, h3
, h4
, h5
, h6
, hr
, img
, li
, ol
, p
, pre
, strong
, and
ul
.
With remark-gfm
, you can also use del
, input
, table
,
tbody
, td
, th
, thead
, and tr
.
Other remark or rehype plugins that add support for new constructs will also
work with react-markdown
.
The props that are passed are what you probably would expect: an a
(link) will
get href
(and title
) props, and img
(image) an src
, alt
and title
,
etc.
Every component will receive a node
.
This is the original Element
from hast
element being turned
into a React element.
You might have trouble with how line endings work in markdown and JSX. We recommend the following, which solves all line ending problems:
// If you write actual markdown in your code, put your markdown in a variable;
// **do not indent markdown**:
const markdown = `
# This is perfect!
`
// Pass the value as an expresion as an only child:
const result = <Markdown>{markdown}</Markdown>
👆 That works. Read on for what doesn’t and why that is.
You might try to write markdown directly in your JSX and find that it does not work:
<Markdown>
# Hi
This is **not** a paragraph.
</Markdown>
The is because in JSX the whitespace (including line endings) is collapsed to a single space. So the above example is equivalent to:
<Markdown> # Hi This is **not** a paragraph. </Markdown>
Instead, to pass markdown to Markdown
, you can use an expression:
with a template literal:
<Markdown>{`
# Hi
This is a paragraph.
`}</Markdown>
Template literals have another potential problem, because they keep whitespace (including indentation) inside them. That means that the following does not turn into a heading:
<Markdown>{`
# This is **not** a heading, it’s an indented code block
`}</Markdown>
Use of react-markdown
is secure by default.
Overwriting urlTransform
to something insecure will open you up to XSS
vectors.
Furthermore, the remarkPlugins
, rehypePlugins
, and components
you use may
be insecure.
To make sure the content is completely safe, even after what plugins do,
use rehype-sanitize
.
It lets you define your own schema of what is and isn’t allowed.
MDX
— JSX in markdownremark-gfm
— add support for GitHub flavored markdown supportreact-remark
— hook based alternativerehype-react
— turn HTML into React elementsSee contributing.md
in remarkjs/.github
for ways
to get started.
See support.md
for ways to get help.
This project has a code of conduct. By interacting with this repository, organization, or community you agree to abide by its terms.
FAQs
React component to render markdown
We found that react-markdown demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.