react-markdown: Markdown component for React
Render markdown as React components via unified.
Learn more about react-markdown
react-markdown is a React library that converts markdown text into React virtual DOM elements. It builds on the unified, remark, and rehype toolchain to parse markdown into an abstract syntax tree, transform it through plugins, and render it as React components. The library supports CommonMark compliance and GitHub Flavored Markdown through optional plugins, and allows developers to replace standard HTML elements with custom React components. It avoids dangerouslySetInnerHTML by constructing a virtual DOM directly from the syntax tree, enabling React's standard reconciliation and update mechanisms.
Virtual DOM Rendering
Constructs React elements directly from the markdown AST instead of using dangerouslySetInnerHTML. Enables React's standard reconciliation, diffing, and update mechanisms for safer, more performant rendering.
Component Substitution System
Replace any generated HTML element with custom React components through a simple mapping. Enables syntax highlighting, design system integration, and custom behaviors without wrapper divs or DOM manipulation.
Unified Plugin Ecosystem
Built on the unified.js ecosystem, enabling transformation pipelines with remark and rehype plugins. Add syntax highlighting, math rendering, or custom transformations by composing existing plugins or writing custom processors.
import ReactMarkdown from 'react-markdown';
const markdown = '# Hello World\n\nThis is **bold** text.';
export default function App() {
return <ReactMarkdown>{markdown}</ReactMarkdown>;
}Adds fallback prop to MarkdownHooks and fixes a race condition in the same component.
- –Use the new `fallback` prop on `MarkdownHooks` to handle loading or error states during async rendering.
- –Update code relying on `MarkdownHooks` timing; the race condition fix may change render behavior in edge cases.
Patch release fixing TypeScript compilation performance when using custom component props.
- –Upgrade if you experience slow TypeScript builds with react-markdown's component overrides.
- –No breaking changes or migration steps required for this performance fix.
Breaking: removes the `className` prop entirely; components must use alternative styling approaches.
- –Remove any `className` prop usage from react-markdown components before upgrading.
- –Consult the changelog for recommended alternatives to apply CSS classes or inline styles.
Related Repositories
Discover similar tools and frameworks used by developers
tailwindcss
PostCSS framework generating utility classes from scanned templates.
dash
Build reactive web apps with Python callbacks.
astro
Static site generator with selective component hydration.
vite
Native ESM dev server with Rollup production builds.
create-react-app
Zero-configuration React scaffolding tool with preconfigured toolchain.