All notable changes will be documented in this file.

• 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

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.

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

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

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

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.

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

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

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

• 33ab015 Update to TS 5
  by @Methuselah96 in #734

• 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

• 2712227 Update react-is
• 704c3c6 Fix TypeScript bug by adding workaround
  by @Methuselah96 in #676

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

• cd845c9 Remove deprecated plugins option
  (migrate by renaming it to remarkPlugins)
• 36e4916 Update remark-rehype, add support for passing it options
  by @peolic in #669
  (migrate by removing remark-footnotes and updating remark-gfm if you were using them, otherwise you shouldn’t notice this)

• 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

• ec387c2 Add improved type for linkTarget as string
• 5af6bc7 Fix to correctly compile intrinsic types

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

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

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

• 13367ed Fix types to include each element w/ its properties
• 0a1931a Fix to add min version of property-information

• cefc02d Add string type for classNames
• 6355e45 Fix to pass vfile to plugins
• 5cf6e1b Fix to add warning when non-strings are given as children

• 2e956be Fix whitespace in table elements
• d36048a Add architecture section to readme

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

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.

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

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

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.

import rehypeHighlight from 'rehype-highlight'

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

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.

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

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

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

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

Instead of passing a source pass children instead:

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

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

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

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.

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

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

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

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

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.

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

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

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

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.

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

• bb0bdde Unlock peer dependency on React to allow v17
• 24e42bd Fix exception on missing element from html-to-react
• 3d363e9 Fix umd browser build

• 4dadaba Fix to allow combining allowedTypes, unwrapDisallowed in types

• c3dc5ee Fix to not crash on empty text nodes

This project is now maintained by the unified collective, which also houses the underlying tools used in react-markdown: hundreds of projects for working with markdown and markup related things (including MDX). We have cleaned the project: updated dependencies, improved docs/tests/coverage/types, cleaned the issue tracker, and fixed a couple of bugs, but otherwise much should be the same.

The parser used in react-markdown has been upgraded to the latest version. It is now 100% CommonMark compliant: that means it works the same as in other places, such as Discourse, Reddit, Stack Overflow, and GitHub. Note that GitHub does extend CommonMark: to match how Markdown works on GitHub, use the remark-gfm plugin.

• remark-parse@9.0.0
• remark-parse@8.0.0
• remark-parse@7.0.0
• remark-parse@6.0.0

A new node prop is passed to all non-tag/non-fragment renderers. This contains the raw mdast AST node, which opens up a number of interesting possibilities. The breaking change is for renderers which blindly spread their props to an underlying component/tag. For instance:

<ReactMarkdown renderers={{link: props => <a {...props} />}} … />

Should now be written as:

<ReactMarkdown renderers={{link: ({node, ...props}) => <a {...props} />}} … />

Previously, the tight property would hint as to whether or not list items should be wrapped in paragraphs. This logic has now been replaced by a new spread property, which behaves slightly differently. Read more.

• (Typings) Fix incorrect typescript definitions (Peng Guanwen)

• (Typings) Add typings for react-markdown/html-parser (Peng Guanwen)

• (Typings) Inline RemarkParseOptions for now (Espen Hovlandsdal)

• (Typings) Fix incorrect import - RemarkParseOptions (Jakub Chrzanowski)

• Add support for plugins that use AST transformations (Frankie Ali)

• (Typings) Add parserOptions to type defintions (Ted Piotrowski)
• Allow renderer to be any React element type (Nathan Bierema)

• Add prop parserOptions to specify options for remark-parse (Kelvin Chan)

• (Typings) Make transformLinkUri & transformImageUri actually nullable (Florentin Luca Rieger)

• Fix HTML parsing of elements with a single child vs. multiple children (Nicolas Venegas)

• Fix matching of replaced non-void elements in HTML parser plugin (Nicolas Venegas)
• Fix HTML parsing of multiple void elements (Nicolas Venegas)
• Fix void element children invariant violation (Nicolas Venegas)

• Mitigate regex ddos by upgrading html-to-react (Christoph Werner)
• Update typings to allow arbitrary node types (Jesse Pinho)
• Readme: Add note about only parsing plugins working (Vincent Tunru)

• Upgrade dependencies (Espen Hovlandsdal)

• Output paragraph element for last item in loose list (Jeremy Moseley)

• Fix text rendering in React versions lower than or equal to 15 (Espen Hovlandsdal)

• [TypeScript] Fix TypeScript index signature for renderers (Linus Unnebäck)

• text is now a first-class node + renderer — if you are using allowedNodes, it needs to be included in this list. Since it is now a React component, it will be passed an object of props instead of the old approach where a string was passed. children will contain the actual text string.
• On React >= 16.2, if no className prop is provided, a fragment will be used instead of a div. To always render a div, pass 'div' as the root renderer.
• On React >= 16.2, escaped HTML will no longer be rendered with div/span containers
• The UMD bundle now exports the component as window.ReactMarkdown instead of window.reactMarkdown

• HTML parser plugin for full HTML compatibility (Espen Hovlandsdal)

• URI transformer allows uppercase http/https URLs (Liam Kennedy)
• [TypeScript] Strongly type the keys of renderers (Linus Unnebäck)

• Add support for passing index info to renderers (Beau Roberts)

• Allow specifying target attribute for links (Marshall Smith)

• Bump dependency for mdast-add-list-metadata as it was using ES6 features (Espen Hovlandsdal)

• Add more metadata props to list and listItem (André Staltz)
  • list: depth
  • listItem: ordered, index

• Make source property optional in typescript definition (gRoberts84)

• Fix bug where rendering empty link references ([][]) would fail (Dennis S)

• Fix bug where unwrapping certain disallowed nodes would fail (Petr Gazarov)

• Add rawSourcePos property for passing structured source position info to renderers (Espen Hovlandsdal)

• Pass properties of unknown nodes directly to renderer (Jesse Pinho)
• Update TypeScript definition and prop types (ClassicDarkChocolate)

• Add support for fragment renderers (Benjamim Sonntag)

• Fix language escaping in code blocks (Espen Hovlandsdal)

• Pass the React key into an overridden text renderer (vanchagreen)

• Allow overriding text renderer (Thibaud Courtoison)

• Only use first language from code block (Espen Hovlandsdal)

• Enable transformImageUri for image references (evoye)

• Exclude babel config from npm package (Espen Hovlandsdal)

• Fixed partial table exception (Alexander Wong)

• Add readOnly property to checkboxes (Phil Rajchgot)

• Support for checkbox lists (Espen Hovlandsdal)

• Better typings (Igor Kamyshev)

• Experimental support for plugins (Espen Hovlandsdal)

• Provide more arguments to transformLinkUri/transformImageUri (children, title, alt) (mudrz)

• FULL REWRITE. Changed parser from CommonMark to Markdown. Big, breaking changes. See BREAKING below.

• Table support!
  • New types: table, tableHead, tableBody, tableRow, tableCell
• New type: delete (~~foo~~)
• New type: imageReference
• New type: linkReference
• New type: definition
• Hacky, but basic support for React-native rendering of attributeless HTML nodes (<kbd>, <sub>, etc)

• Container props removed (containerTagName, containerProps), override root renderer instead
• softBreak option removed. New solution will be added at some point in the future.
• escapeHtml is now TRUE by default
• HtmlInline/HtmlBlock are now named html (use isBlock prop to check
  if inline or block)
• Renderer names are camelcased and in certain cases, renamed. For instance:
  • Emph => emphasis
  • Item => listItem
  • Code => inlineCode
  • CodeBlock => code
  • linebreak/hardbreak => break
• All renderers: literal prop is now called value* List renderer: type prop is now a boolean named ordered (Bullet => false, Ordered => true)
• walker prop removed. Code depending on this will have to be rewritten to use the astPlugins prop, which functions differently.
• allowNode has new arguments (node, index, parent) — node has different props, see renderer props
• childBefore and childAfter props removed. Use root renderer instead.
• parserOptions removed (new parser, so the old options doesn’t make sense anymore)

• Fix <br/> not having a node key (Alex Zaworski)

• Fix deprecations for React v15.5 (Renée Kooi)

• Fix too strict TypeScript definition (Rasmus Eneman)
• Update JSON-loader info in readme to match webpack 2 (Robin Wieruch)

• Add ability to pass options to the CommonMark parser (Evan Hensleigh)

• Fixed TypeScript definitions (Kohei Asai)

• Added TypeScript definitions (Ibragimov Ruslan)

• Added UMD-build (umd/react-markdown.js) (Espen Hovlandsdal)

• Update commonmark-react-renderer, fixing a bug with missing nodes (Espen Hovlandsdal)

• Plain DOM-node renderers are now given only their respective props. Fixes warnings when using React >= 15.2 (Espen Hovlandsdal)

• New transformImageUri option allows you to transform URIs for images (Petri Lehtinen)

• The walker instance is now passed to the walker callback function (Riku Rouvila)

• Add childBefore/childAfter options (Thomas Lindstrøm)

• Add containerProps option (Thomas Lindstrøm)

• Join sibling text nodes into one text node (Espen Hovlandsdal)

• Update commonmark-react-renderer dependency to latest version to add keys to all elements and simplify custom renderers

• Breaking change: The renderer now requires Node 0.14 or higher. This is because the renderer uses stateless components internally.
• Breaking change: allowNode now receives different properties in the options argument. See README.md for more details.
• Breaking change: CommonMark has changed some type names. Html is now HtmlInline, Header is now Heading and HorizontalRule is now ThematicBreak. This affects the allowedTypes and disallowedTypes options.
• Breaking change: A bug in the allowedTypes/disallowedTypes and allowNode options made them only applicable to certain types. In this version, all types are filtered, as expected.
• Breaking change: Link URIs are now filtered through an XSS-filter by default, prefixing “dangerous” protocols such as javascript: with x- (eg: javascript:alert('foo') turns into x-javascript:alert('foo')). This can be overridden with the transformLinkUri-option. Pass null to disable the feature or a custom function to replace the built-in behaviour.

• New renderers option allows you to customize which React component should be used for rendering given types. See README.md for more details. (Espen Hovlandsdal / Guillaume Plique)
• New unwrapDisallowed option allows you to select if the contents of a disallowed node should be “unwrapped” (placed into the disallowed node position). For instance, setting this option to true and disallowing a link would still render the text of the link, instead of the whole link node and all it’s children disappearing. (Espen Hovlandsdal)
• New transformLinkUri option allows you to transform URIs in links. By default, an XSS-filter is used, but you could also use this for use cases like transforming absolute to relative URLs, or similar. (Espen Hovlandsdal)

• Rolled back dependencies because of breaking changes

• Updated dependencies for both commonmark and commonmark-react-parser to work around an embarrassing oversight on my part.

• Reverted change from 1.2.1 that uses the dist version. Instead, documentation is added that specified the need for json-loader to be enabled when using webpack.

• Use pre-built (dist version) of commonmark renderer in order to work around JSON-loader dependency.

• Added new allowNode-property. See README for details.

• Set correct libraryTarget to make UMD builds work as expected

• Update babel dependencies and run prepublish only as actual prepublish, not install

• Fixed issue with React external name in global environment (react vs React)

• Add ability to allow/disallow specific node types (allowedTypes/disallowedTypes)

• Moved React from dependency to peer dependency.