{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-showdown"],"cli":null},"imports":["import MarkdownView from 'react-showdown';","import type { ConverterOptions } from 'react-showdown';","import type { Flavor } from 'react-showdown';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}