react-markdown
Advanced tools
Changelog
10.0.0 - 2025-02-20
aaaa40b
Remove support for className
prop
migrate: see “Remove className
” belowclassName
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>
Changelog
9.0.3 - 2025-01-06
(same as 9.0.2 but now with d.ts files)
Changelog
9.0.0 - 2023-09-27
b67d714
Change to require Node.js 16ec2b134
Change to require React 18bf5824f
Change to use exports
c383a45
Update @types/hast
, utilities, plugins, etceca5e6b
08ead9e
Replace transformImageUri
, transformLinkUri
w/ urlTransform
urlTransform
” belowde29396
Remove linkTarget
optionlinkTarget
” below4346276
Remove support for passing custom props to componentsincludeElementIndex
”, “Remove rawSourcePos
”,
“Remove sourcePos
”, “Remove extra props passed to certain components”
belowc0dfbd6
Remove UMD bundle from packageesm.sh
or a CDN or soe12b5e9
Remove prop-types
4eb7aa0
Change to throw errors for removed props8aabf74
Change to improve error messagesurlTransform
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.
linkTarget
The linkTarget
option was removed; you should likely not set targets.
If you want to, use
rehype-external-links
.
includeElementIndex
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
}
})
}
}
</details>
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.
sourcePos
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)
}
})
}
}
</details>
When overwriting components, these props are no longer passed:
inline
on code
— create a plugin or use pre
for the blocklevel
on h1
, h2
, h3
, h4
, h5
, h6
— check node.tagName
insteadchecked
on li
— check task-list-item
class or check props.children
index
on li
— create a pluginordered
on li
— create a plugin or check the parentdepth
on ol
, ul
— create a pluginordered
on ol
, ul
— check node.tagName
insteadisHeader
on td
, th
— check node.tagName
insteadisHeader
on tr
— create a plugin or check children