Registry / web-framework / react-showdown

react-showdown

library2.3.1jsnpmunverified

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.

web-framework serialization

npm install react-showdown

package ↗

INSTALL

IMPORT

SIG · REACT-SHOWDOWN

react-showdown

web-frameworkjavascriptv2.3.1

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.

MarkdownView

✓ import MarkdownView from 'react-showdown';

✗ import { MarkdownView } from 'react-showdown';

MarkdownView is the default export and main component for rendering Markdown.

ConverterOptions

✓ import type { ConverterOptions } from 'react-showdown';

✗ import { ConverterOptions } from 'react-showdown';

Used for type-checking the options prop passed to MarkdownView. Prefer 'import type' for type-only imports in TypeScript.

Flavor

✓ import type { Flavor } from 'react-showdown';

✗ import { Flavor } from 'react-showdown';

Used for type-checking the 'flavor' prop, which allows setting predefined Showdown configurations. Prefer 'import type' for type-only imports.

Demonstrates rendering basic Markdown with options and embedding a custom React component within Markdown text.

import React from 'react'; import MarkdownView from 'react-showdown'; function CustomComponent({ name }: { name: string }) { return <span style={{ color: 'blue', fontWeight: 'bold' }}>Hello {name}!</span>; } export default function App() { const basicMarkdown = ` # Welcome to React Showdown :wave: This is a simple markdown example with a table and emojis. | Header 1 | Header 2 | |----------|----------| | Cell A1 | Cell B1 | | Cell A2 | Cell B2 | `; const markdownWithComponent = ` # Embedding React Components Here's a custom component: <CustomComponent name="World" /> You can pass props and define complex logic within them. `; return ( <div> <h2>Basic Markdown Render:</h2> <MarkdownView markdown={basicMarkdown} options={{ tables: true, emoji: true, simpleLineBreaks: true }} className="markdown-output" /> <h2>Markdown with Custom Component:</h2> <MarkdownView markdown={markdownWithComponent} components={{ CustomComponent }} className="markdown-output" /> </div> ); };

Debug

Known issues

gotchaIn `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.

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 }}`.

affects: >=2.1.0

breakingThis 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.

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`.

affects: <16.0.0

Errors

Common errors & fixes

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.

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.

fix

Ensure the `components` prop is an object with direct references to your React components: `<MarkdownView components={{ YourComponent }} />`.

TypeError: Cannot read properties of undefined (reading 'markdown') (or similar property access errors related to props)

The required `markdown` prop was not provided or was `undefined` when rendering the `MarkdownView` component.

fix

Always pass a string value, even an empty one, to the `markdown` prop: `<MarkdownView markdown={myMarkdownString} />`.

Markdown content appears truncated or parts are missing, especially after custom HTML-like tags.

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.

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`.

Upgrade

Version history

2.3.1latest on npm

Audit

Dependencies

reactrequiredPeer dependency for any React application using this library.

Agent activity

4 hits · last 30 days

node

Resources

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