{"id":16511,"library":"react-markdown","title":"React Markdown Component","description":"React-markdown is a robust and secure React component designed to render markdown strings into a React element tree. It is currently at version 10.1.0 and is actively maintained with regular minor and patch releases, and significant breaking changes occurring with major version bumps (e.g., v9, v10). A key differentiator is its commitment to security, rendering markdown safely without relying on `dangerouslySetInnerHTML`, thus preventing common XSS vulnerabilities by default. The component leverages the unified ecosystem, specifically remark for markdown parsing and rehype for HTML transformation, enabling extensive customization through a wide array of plugins. Developers can also provide their own React components to override default HTML element renderings, offering fine-grained control over the output. Unlike alternatives that might directly inject HTML or offer less flexibility, react-markdown builds a virtual DOM from a syntax tree, ensuring React efficiently updates only what has changed. It distinguishes itself from `react-remark` and `rehype-react` by being simpler for beginners, while MDX serves a different purpose for embedding JSX within markdown.","status":"active","version":"10.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/remarkjs/react-markdown","tags":["javascript","ast","commonmark","component","gfm","markdown","react","react-component","remark","typescript"],"install":[{"cmd":"npm install react-markdown","lang":"bash","label":"npm"},{"cmd":"yarn add react-markdown","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-markdown","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for rendering React components.","package":"react","optional":false},{"reason":"Provides TypeScript definitions for React components.","package":"@types/react","optional":true}],"imports":[{"note":"The primary component for rendering markdown. `react-markdown` is ESM-only since v9.0.0.","wrong":"const Markdown = require('react-markdown')","symbol":"Markdown","correct":"import Markdown from 'react-markdown'"},{"note":"Provides a more advanced, hook-based API for greater control over the rendering process.","wrong":"import MarkdownHooks from 'react-markdown'","symbol":"MarkdownHooks","correct":"import { MarkdownHooks } from 'react-markdown'"},{"note":"Type import for configuring the `Markdown` component's props, including plugins and component overrides.","wrong":"import { Options } from 'react-markdown'","symbol":"Options","correct":"import type { Options } from 'react-markdown'"}],"quickstart":{"code":"import React from 'react'\nimport {createRoot} from 'react-dom/client'\nimport Markdown from 'react-markdown'\n\nconst markdown = '# Hi, *Pluto*!\\n\\nThis is a simple example of how to use `react-markdown`.\\n\\n- It renders CommonMark by default.\\n- You can pass plugins for GFM or other features.\\n\\nEnjoy rendering your markdown!'\n\nconst rootElement = document.getElementById('root') || document.createElement('div');\nif (!document.getElementById('root')) {\n  document.body.appendChild(rootElement);\n}\nconst root = createRoot(rootElement);\n\nroot.render(<Markdown>{markdown}</Markdown>);","lang":"typescript","description":"Demonstrates basic usage of the `react-markdown` component to render a markdown string to React elements in a browser environment."},"warnings":[{"fix":"To apply styles or classes to specific HTML elements, use the `components` prop. For example, to style all `h1` elements: `<Markdown components={{ h1: ({node, ...props}) => <h1 className=\"my-h1-class\" {...props} /> }} />`.","message":"The `className` prop was removed in `react-markdown` v10.0.0. Direct application of `className` to the root Markdown component is no longer supported for styling specific elements.","severity":"breaking","affected_versions":">=10.0.0"},{"fix":"Ensure your project's `package.json` specifies `\"engines\": { \"node\": \">=16\" }` and update `react` and `@types/react` to version 18 or higher.","message":"`react-markdown` v9.0.0 and later require Node.js 16+ and React 18+ due to underlying dependency updates and API changes.","severity":"breaking","affected_versions":">=9.0.0"},{"fix":"Migrate your import statements from `const Markdown = require('react-markdown')` to `import Markdown from 'react-markdown'` and configure your project for ESM compatibility (e.g., by setting `\"type\": \"module\"` in `package.json`).","message":"Starting with v9.0.0, `react-markdown` is an ESM-only package, meaning `require()` calls will no longer work.","severity":"breaking","affected_versions":">=9.0.0"},{"fix":"Update your code to use the `urlTransform` prop, which takes the URL, its type ('image' or 'link'), and the value as arguments.","message":"The `transformImageUri` and `transformLinkUri` props were replaced by a single `urlTransform` prop in v9.0.0, offering a unified way to transform all URLs.","severity":"breaking","affected_versions":">=9.0.0"},{"fix":"Only use plugins that process raw HTML, such as `rehype-raw`, with markdown content from trusted sources, or ensure thorough sanitization of user-provided markdown before processing.","message":"While `react-markdown` is safe by default against XSS, using plugins like `rehype-raw` with untrusted markdown input can reintroduce security vulnerabilities by directly injecting raw HTML.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"Change `const Markdown = require('react-markdown')` to `import Markdown from 'react-markdown'` and ensure your project is configured for ESM (e.g., by adding `\"type\": \"module\"` to `package.json` or using a bundler that handles ESM).","cause":"`react-markdown` is an ESM-only package since v9.0.0, but your project is attempting to import it using CommonJS `require()` syntax.","error":"Error [ERR_REQUIRE_ESM]: require() of ES Module .../node_modules/react-markdown/index.js from ... not supported."},{"fix":"Upgrade your React installation to React 18 or newer, along with its corresponding `@types/react` package. `npm install react@latest react-dom@latest @types/react@latest @types/react-dom@latest`.","cause":"You are using `react-markdown` v9.0.0 or higher with an older version of React (e.g., React 17 or earlier).","error":"TypeError: Cannot read properties of undefined (reading 'Children') (or similar React 18 related errors)"},{"fix":"To apply classes or styles to specific elements rendered by `react-markdown`, use the `components` prop to override the default HTML element renderer. For example: `<Markdown components={{ p: ({node, ...props}) => <p className=\"my-paragraph\" {...props} /> }} />`.","cause":"The `className` prop was removed from the main `Markdown` component in v10.0.0. Direct styling of the root element or specific child elements via `className` on the `Markdown` component is no longer supported.","error":"Warning: Received `true` for a non-boolean attribute `className`. If this is expected, cast the value to a string. (This warning may indicate the `className` prop is being used incorrectly with `react-markdown`)."}],"ecosystem":"npm"}