react-markdown

• aaaa40b Remove support for className prop migrate: see “Remove className” below

Remove className

The className prop was removed. If you want to add classes to some element that wraps the markdown you can explicitly write that element and add the class to it. You can then choose yourself which tag name to use and whether to add other props.

Before:

<Markdown className="markdown-body">{markdown}</Markdown>

After:

<div className="markdown-body">
  <Markdown>{markdown}</Markdown>
</div>

• 6ce120e Add support for async plugins

• b151a90 Fix types for React 19
• 6962af7 Add declaration maps
• aa5933b Refactor to use @import to import types

• b67d714 Change to require Node.js 16
  migrate: update too
• ec2b134 Change to require React 18
  migrate: update too
• bf5824f Change to use exports
  migrate: don’t use private APIs
• c383a45 Update @types/hast, utilities, plugins, etc
  migrate: update too
• eca5e6b 08ead9e Replace transformImageUri, transformLinkUri w/ urlTransform
  migrate: see “Add urlTransform” below
• de29396 Remove linkTarget option
  migrate: see “Remove linkTarget” below
• 4346276 Remove support for passing custom props to components
  migrate: see “Remove includeElementIndex”, “Remove rawSourcePos”, “Remove sourcePos”, “Remove extra props passed to certain components” below
• c0dfbd6 Remove UMD bundle from package
  migrate: use esm.sh or a CDN or so
• e12b5e9 Remove prop-types
  migrate: use TypeScript
• 4eb7aa0 Change to throw errors for removed props
  migrate: don’t pass options that don’t do things
• 8aabf74 Change to improve error messages
  migrate: expect better messages

Add urlTransform

The transformImageUri and transformLinkUri were removed. Having two functions is a bit much, particularly because there are more URLs you might want to change (or which might be unsafe so we make them safe). And their name and APIs were a bit weird. You can use the new urlTransform prop instead to change all your URLs.

Remove linkTarget

The linkTarget option was removed; you should likely not set targets. If you want to, use rehype-external-links.

Remove includeElementIndex

The includeElementIndex option was removed, so index is never passed to components. Write a plugin to pass index:

<details> <summary>Show example of plugin</summary>

import {visit} from 'unist-util-visit'

function rehypePluginAddingIndex() {
  /**
   * @param {import('hast').Root} tree
   * @returns {undefined}
   */
  return function (tree) {
    visit(tree, function (node, index) {
      if (node.type === 'element' && typeof index === 'number') {
        node.properties.index = index
      }
    })
  }
}

</details>

Remove rawSourcePos

The rawSourcePos option was removed, so sourcePos is never passed to components. All components are passed node, so you can get node.position from them.

Remove sourcePos

The sourcePos option was removed, so data-sourcepos is never passed to elements. Write a plugin to pass index:

<details> <summary>Show example of plugin</summary>

import {stringifyPosition} from 'unist-util-stringify-position'
import {visit} from 'unist-util-visit'

function rehypePluginAddingIndex() {
  /**
   * @param {import('hast').Root} tree
   * @returns {undefined}
   */
  return function (tree) {
    visit(tree, function (node) {
      if (node.type === 'element') {
        node.properties.dataSourcepos = stringifyPosition(node.position)
      }
    })
  }
}

</details>

Remove extra props passed to certain components

When overwriting components, these props are no longer passed:

• inline on code — create a plugin or use pre for the block
• level on h1, h2, h3, h4, h5, h6 — check node.tagName instead
• checked on li — check task-list-item class or check props.children
• index on li — create a plugin
• ordered on li — create a plugin or check the parent
• depth on ol, ul — create a plugin
• ordered on ol, ul — check node.tagName instead
• isHeader on td, th — check node.tagName instead
• isHeader on tr — create a plugin or check children

• c289176 Fix performance for keys by @wooorm in #738
• 9034dbd Fix types in syntax highlight example by @dlqqq in #736

Full Changelog: https://github.com/remarkjs/react-markdown/compare/8.0.6...8.0.7

• d640d40 Update to use node16 module resolution in tsconfig.json
  by @ChristianMurphy in #723
• 402fea3 Fix typo in plugins deprecation message
  by @marc2332 in #719
• 4f98f73 Remove deprecated and unneeded defaultProps
  by @Lepozepo in #718

• 9b20440 Fix type of td, th props
  by @lucasassisrosa in #714
• cfe075b Add clarification of alt on img in docs
  by @cballenar in #692

• a2fb833 Fix prop types of plugins
  by @starpit in #683

• c23ecf6 Add missing dependency for types
  by @Methuselah96 in #675

• 656a4fa Fix ref in types
  by @ChristianMurphy in #668

• 4185f06 Add improved docs
  by @wooorm in #657

• 7b8a829 Add support for SpecialComponents to be any ComponentType
  by @Methuselah96 in #640
• a7c26fc Remove warning on whitespace in tables

Welcome to version 7. This a major release and therefore contains breaking changes.

Breaking changes

• 01b11fe c613efd a1e1c3f aeee9ac Use ESM (please read this)
• 3dffd6a Update dependencies (upgrade all your plugins and this should go fine)

Internals

• 8b5481c fb1b512 144af79 Replace jest with uvu
• 8c572df Replace rollup with esbuild
• 8737eac 28d4c75 b2dd046 Refactor code-style

Welcome to version 6. This a major release and therefore contains breaking changes.

Change renderers to components

react-markdown used to let you define components for markdown constructs (link, delete, break, etc). This proved complex as users didn’t know about those names or markdown peculiarities (such as that there are fully formed links and link references).

See GH-549 for more on why this changed. See Appendix B: Components in readme.md for more on components.

<details> <summary>Show example of needed change</summary>

Before (broken):

<Markdown
  renderers={{
    // Use a fancy hr
    thematicBreak: ({node, ...props}) => <MyFancyRule {...props} />
  }}
>{`***`}</Markdown>

Now (fixed):

<Markdown
  components={{
    // Use a fancy hr
    hr: ({node, ...props}) => <MyFancyRule {...props} />
  }}
>{`***`}</Markdown>

</details>

<details> <summary>Show conversion table</summary>

Type (renderers)	Tag names (components)
blockquote	blockquote
break	br
code, inlineCode	code, pre​*​
definition	†
delete	del‡
emphasis	em
heading	h1, h2, h3, h4, h5, h6§
html, parsedHtml, virtualHtml	‖
image, imageReference	img†
link, linkReference	a†
list	ol, ul¶
listItem	li
paragraph	p
root	​**​
strong	strong
table	table‡
tableHead	thead‡
tableBody	tbody‡
tableRow	tr‡
tableCell	td, th‡
text
thematicBreak	hr

• ​*​ It’s possible to differentiate between code based on the inline prop. Block code is also wrapped in a pre
• † Resource ([text](url)) and reference ([text][id]) style links and images (and their definitions) are now resolved and treated the same
• ‡ Available when using remark-gfm
• § It’s possible to differentiate between heading based on the level prop
• ‖ When using rehype-raw (see below), components for those elements can also be used (for example, abbr for <abbr title="HyperText Markup Language">HTML</abbr>)
• ¶ It’s possible to differentiate between lists based on the ordered prop
• ​**​ Wrap ReactMarkdown in a component instead

</details>

Add rehypePlugins

We’ve added another plugin system: rehype. It’s similar to remark (what we’re using for markdown) but for HTML.

There are many rehype plugins. Some examples are @mapbox/rehype-prism (syntax highlighting with Prism), rehype-katex (rendering math with KaTeX), or rehype-autolink-headings (adding links to headings).

See List of plugins for more plugins.

<details> <summary>Show example of feature</summary>

import rehypeHighlight from 'rehype-highlight'

<Markdown rehypePlugins={[rehypeHighlight]}>{`~~~js
console.log(1)
~~~`}</Markdown>

</details>

Remove buggy HTML in markdown parser

In a lot of cases, you should not use HTML in markdown: it’s most always unsafe. And it defeats much of the purpose of this project (not relying on dangerouslySetInnerHTML).

react-markdown used to have an opt-in HTML parser with a bunch of bugs. As we now support rehype plugins, we can defer that work to a rehype plugin. To support HTML in markdown with react-markdown, use rehype-raw. The astPlugins and allowDangerousHtml (previously called escapeHtml) props are no longer needed and were removed.

When using rehype-raw, you should probably use rehype-sanitize too.

<details> <summary>Show example of needed change</summary>

Before (broken):

import MarkdownWithHtml from 'react-markdown/with-html'

<MarkdownWithHtml>{`# Hello, <i>world</i>!`}</MarkdownWithHtml>

Now (fixed):

import Markdown from 'react-markdown'
import rehypeRaw from 'rehype-raw'
import rehypeSanitize from 'rehype-sanitize'

<Markdown rehypePlugins={[rehypeRaw, rehypeSanitize]}>{`# Hello, <i>world</i>!`}</Markdown>

</details>

Change source to children

Instead of passing a source pass children instead:

<details> <summary>Show example of needed change</summary>

Before (broken):

<Markdown source="some\nmarkdown"></Markdown>

Now (fixed):

<Markdown>{`some
markdown`}</Markdown>

Or (also fixed):

<Markdown children={`some
markdown`} />

</details>

Replace allowNode, allowedTypes, and disallowedTypes

Similar to the renderers to components change, the filtering options also changed from being based on markdown names towards being based on HTML names: allowNode to allowElement, allowedTypes to allowedElements, and disallowedTypes to disallowedElements.

<details> <summary>Show example of needed change</summary>

Before (broken):

<Markdown
  // Skip images
  disallowedTypes={['image']}
>{`![alt text](./image.url)`}</Markdown>

Now (fixed):

<Markdown
  // Skip images
  disallowedElements={['img']}
>{`![alt text](./image.url)`}</Markdown>

---

Before (broken):

<Markdown
  // Skip h1
  allowNode={(node) => node.type !== 'heading' || node.depth !== 1}
>{`# main heading`}</Markdown>

Now (fixed):

<Markdown
  // Skip h1
  allowElement={(element) => element.tagName !== 'h1'}
>{`# main heading`}</Markdown>

</details>

Change includeNodeIndex to includeElementIndex

Similar to the renderers to components change, this option to pass more info to components also changed from being based on markdown to being based on HTML.

<details> <summary>Show example of needed change</summary>

Before (broken):

<Markdown
  includeNodeIndex={true}
  renderers={{
    paragraph({node, index, parentChildCount, ...props}) => <MyFancyParagraph {...props} />
  }}
>{`Some text`}</Markdown>

Now (fixed):

<Markdown
  includeElementIndex={true}
  components={{
    p({node, index, siblingsCount, ...props}) => <MyFancyParagraph {...props} />
  }}
>{`Some text`}</Markdown>

</details>

Change signature of transformLinkUri, linkTarget

The second parameter of these functions (to rewrite href on a or to define target on a) are now hast (HTML AST) instead of mdast (markdown AST).

Change signature of transformImageUri

The second parameter of this function was always undefined and the fourth was the alt (string) on the image. The second parameter is now that alt.

Remove support for React 15, IE11

We now use ES2015 (such as Object.assign) and removed certain hacks to work with React 15 and older.