{"id":18524,"library":"marked-react","title":"marked-react","description":"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.","status":"active","version":"4.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/sibiraj-s/marked-react","tags":["javascript","markdown","marked","markedjs","no dangerouslySetInnerHTML","react","typescript"],"install":[{"cmd":"npm install marked-react","lang":"bash","label":"npm"},{"cmd":"yarn add marked-react","lang":"bash","label":"yarn"},{"cmd":"pnpm add marked-react","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React components","package":"react","optional":false},{"reason":"Core Markdown parser","package":"marked","optional":false}],"imports":[{"note":"Default export since v1; named export does not exist.","wrong":"import { Markdown } from 'marked-react'","symbol":"Markdown","correct":"import Markdown from 'marked-react'"},{"note":"Named export for hooks style usage; requires React hooks support.","wrong":null,"symbol":"useMarked","correct":"import { useMarked } from 'marked-react'"},{"note":"TypeScript type; only needed for custom renderer typings.","type":true,"wrong":"import { Renderer } from 'marked-react' (runtime import of type only)","symbol":"Renderer","correct":"import type { Renderer } from 'marked-react'"}],"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport Markdown from 'marked-react';\n\nconst App = () => (\n  <Markdown\n    value=\"# Hello, world!\\n\\nThis is **Markdown** rendered as React components.\"\n    gfm\n    breaks\n  />\n);\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(<App />);","lang":"typescript","description":"Shows basic usage: import Markdown component, render Markdown string with GFM and line breaks enabled."},"warnings":[{"fix":"Pass renderer as object literal: const renderer = { code(snippet, lang) { ... } }","message":"In v4, the 'renderer' prop now expects plain object instead of class instances.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Use <Markdown value={...}> instead of <Markdown>content</Markdown>","message":"The 'value' prop is now required; content as children is deprecated.","severity":"deprecated","affected_versions":">=3.0.0 <4.0.0"},{"fix":"No workaround; security design. Disable with `renderHtml` if needed (not recommended).","message":"HTML in Markdown is rendered as plain text to avoid XSS risks.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use only documented parameters; ignore extra props.","message":"When using custom renderer, each method might receive additional internal props; avoid spreading them to DOM.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Ensure renderer object has the correct method names and returns a valid React element.","cause":"Custom renderer method returning undefined or missing required key.","error":"Uncaught TypeError: Cannot read properties of undefined (reading 'code')"},{"fix":"Run: npm install marked-react","cause":"Package not installed or import path incorrect.","error":"Module not found: Can't resolve 'marked-react'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}