marked-react

4.0.0 verified Sat Apr 25 auth: no javascript

Render Markdown as React components using the 'marked' parser. Version 4.0.0 (released 2024) actively maintained with frequent updates. Unlike many alternatives that rely on dangerouslySetInnerHTML, marked-react produces actual React elements for safe rendering. Supports GFM, inline parsing, syntax highlighting via custom renderers, and TypeScript types. No external CSS required.

Common errors

error Uncaught TypeError: Cannot read properties of undefined (reading 'code') ↓

cause Custom renderer method returning undefined or missing required key.

fix

Ensure renderer object has the correct method names and returns a valid React element.

error Module not found: Can't resolve 'marked-react' ↓

cause Package not installed or import path incorrect.

fix

Run: npm install marked-react

Warnings

breaking In v4, the 'renderer' prop now expects plain object instead of class instances. ↓

fix Pass renderer as object literal: const renderer = { code(snippet, lang) { ... } }

deprecated The 'value' prop is now required; content as children is deprecated. ↓

fix Use <Markdown value={...}> instead of <Markdown>content</Markdown>

gotcha HTML in Markdown is rendered as plain text to avoid XSS risks. ↓

fix No workaround; security design. Disable with `renderHtml` if needed (not recommended).

gotcha When using custom renderer, each method might receive additional internal props; avoid spreading them to DOM. ↓

fix Use only documented parameters; ignore extra props.

Install

npm install marked-react

yarn add marked-react

pnpm add marked-react

Imports

Markdown

wrong

import { Markdown } from 'marked-react'

correct

import Markdown from 'marked-react'

Default export since v1; named export does not exist.

useMarked
```
import { useMarked } from 'marked-react'
```
Named export for hooks style usage; requires React hooks support.

Renderer

wrong

import { Renderer } from 'marked-react' (runtime import of type only)

correct

import type { Renderer } from 'marked-react'

TypeScript type; only needed for custom renderer typings.

Quickstart

Shows basic usage: import Markdown component, render Markdown string with GFM and line breaks enabled.

import React from 'react';
import ReactDOM from 'react-dom/client';
import Markdown from 'marked-react';

const App = () => (
  <Markdown
    value="# Hello, world!\n\nThis is **Markdown** rendered as React components."
    gfm
    breaks
  />
);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);