marked-react

library4.0.0jsnpmunverified

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.

web-framework serialization

npm install marked-react

github ↗package ↗

INSTALL

IMPORT

SIG · MARKED-REACT

marked-react

web-frameworkjavascriptv4.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Markdown

✓ import Markdown from 'marked-react'

✗ 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

✓ import type { Renderer } from 'marked-react'

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

TypeScript type; only needed for custom renderer typings.

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 />);

Debug

Known issues

breakingIn v4, the 'renderer' prop now expects plain object instead of class instances.

fix

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

affects: >=4.0.0

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

fix

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

affects: >=3.0.0 <4.0.0

gotchaHTML in Markdown is rendered as plain text to avoid XSS risks.

fix

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

affects: >=1.0.0

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

fix

Use only documented parameters; ignore extra props.

affects: >=2.0.0

Errors

Common errors & fixes

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

Custom renderer method returning undefined or missing required key.

fix

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

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

Package not installed or import path incorrect.

fix

Run: npm install marked-react

Upgrade

Version history

4.0.0latest on npm

Audit

Dependencies

reactrequiredPeer dependency for React components

markedrequiredCore Markdown parser

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/sibiraj-s/marked-react ↗

packagehttps://www.npmjs.com/package/marked-react ↗