{"id":11857,"library":"react-showdown","title":"React Showdown: Markdown with Embedded Components","description":"react-showdown is a React component library designed for rendering Markdown content within React applications. It leverages the underlying Showdown.js parser, providing a robust solution for Markdown-to-HTML conversion. A key differentiator of this library is its unique capability to embed actual React components directly within Markdown text, which are then rendered seamlessly as part of the React component tree. This feature significantly enhances interactivity and modularity, moving beyond static HTML. The library, currently at stable version 2.3.1, also boasts full TypeScript support and offers extensive configuration options by supporting all Showdown extensions and flavors. While a specific release cadence isn't explicitly stated, the version history (2.0, 2.1, 2.3.1) suggests a pattern of incremental updates focused on new features and bug fixes.","status":"active","version":"2.3.1","language":"javascript","source_language":"en","source_url":"https://github.com/jerolimov/react-showdown","tags":["javascript","react","reactjs","react-component","markdown","showdown","typescript"],"install":[{"cmd":"npm install react-showdown","lang":"bash","label":"npm"},{"cmd":"yarn add react-showdown","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-showdown","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for any React application using this library.","package":"react","optional":false}],"imports":[{"note":"MarkdownView is the default export and main component for rendering Markdown.","wrong":"import { MarkdownView } from 'react-showdown';","symbol":"MarkdownView","correct":"import MarkdownView from 'react-showdown';"},{"note":"Used for type-checking the options prop passed to MarkdownView. Prefer 'import type' for type-only imports in TypeScript.","wrong":"import { ConverterOptions } from 'react-showdown';","symbol":"ConverterOptions","correct":"import type { ConverterOptions } from 'react-showdown';"},{"note":"Used for type-checking the 'flavor' prop, which allows setting predefined Showdown configurations. Prefer 'import type' for type-only imports.","wrong":"import { Flavor } from 'react-showdown';","symbol":"Flavor","correct":"import type { Flavor } from 'react-showdown';"}],"quickstart":{"code":"import React from 'react';\nimport MarkdownView from 'react-showdown';\n\nfunction CustomComponent({ name }: { name: string }) {\n  return <span style={{ color: 'blue', fontWeight: 'bold' }}>Hello {name}!</span>;\n}\n\nexport default function App() {\n  const basicMarkdown = `\n# Welcome to React Showdown :wave:\n\nThis is a simple markdown example with a table and emojis.\n\n| Header 1 | Header 2 |\n|----------|----------|\n| Cell A1  | Cell B1  |\n| Cell A2  | Cell B2  |\n`;\n\n  const markdownWithComponent = `\n# Embedding React Components\n\nHere's a custom component: <CustomComponent name=\"World\" />\n\nYou can pass props and define complex logic within them.\n`;\n\n  return (\n    <div>\n      <h2>Basic Markdown Render:</h2>\n      <MarkdownView\n        markdown={basicMarkdown}\n        options={{ tables: true, emoji: true, simpleLineBreaks: true }}\n        className=\"markdown-output\"\n      />\n\n      <h2>Markdown with Custom Component:</h2>\n      <MarkdownView\n        markdown={markdownWithComponent}\n        components={{ CustomComponent }}\n        className=\"markdown-output\"\n      />\n    </div>\n  );\n};","lang":"typescript","description":"Demonstrates rendering basic Markdown with options and embedding a custom React component within Markdown text."},"warnings":[{"fix":"Review markdown content and converter options, especially if self-closing HTML-like tags (e.g., `<br/>`) are used. If previous behavior is desired, explicitly set `options={{ recognizeSelfClosing: false }}`.","message":"In `react-showdown` v2.1.0, the default value for the `showdown` configuration option `recognizeSelfClosing` was changed to `true`. This fixed an issue where content might be missing after a self-closing component. If you were explicitly setting `recognizeSelfClosing: false` or relying on the previous (buggy) default behavior, your rendered output might change.","severity":"gotcha","affected_versions":">=2.1.0"},{"fix":"Upgrade your project's React dependency to version 16 or higher. Use `npm install react@^16.0.0 react-dom@^16.0.0` or `yarn add react@^16.0.0 react-dom@^16.0.0`.","message":"This library requires React version 16 or newer as a peer dependency. Using it with older React versions (e.g., React 15) will result in installation errors or runtime failures due to incompatible React APIs.","severity":"breaking","affected_versions":"<16.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure the `components` prop is an object with direct references to your React components: `<MarkdownView components={{ YourComponent }} />`.","cause":"Incorrectly passing the `components` prop. The `components` prop expects an object where keys are the component names used in markdown and values are the React component functions themselves, not an array or a deeply nested object.","error":"Error: Objects are not valid as a React child (found: object with keys {CustomComponent}). If you meant to render a collection of children, use an array instead."},{"fix":"Always pass a string value, even an empty one, to the `markdown` prop: `<MarkdownView markdown={myMarkdownString} />`.","cause":"The required `markdown` prop was not provided or was `undefined` when rendering the `MarkdownView` component.","error":"TypeError: Cannot read properties of undefined (reading 'markdown') (or similar property access errors related to props)"},{"fix":"Upgrade `react-showdown` to version 2.1.0 or newer. If upgrading isn't an option, or if the issue persists, ensure `options={{ recognizeSelfClosing: true }}` is passed to `MarkdownView`.","cause":"This typically occurs in versions prior to 2.1.0, or if `recognizeSelfClosing` is explicitly set to `false`, preventing Showdown from correctly parsing content after self-closing elements.","error":"Markdown content appears truncated or parts are missing, especially after custom HTML-like tags."}],"ecosystem":"npm"}