function

markdown.react

function react(
input: string | ArrayBufferLike | TypedArray<ArrayBufferLike> | DataView<ArrayBufferLike>,
components?: ComponentOverrides,
options?: ReactOptions
): unknown;

Render markdown to React JSX elements.

Returns a React Fragment containing the parsed markdown as children. Can be returned directly from a component or passed to renderToString().

Override any HTML element with a custom component by passing it in the second argument, keyed by tag name. Custom components receive the same props the default elements would (e.g. href for links, language for code blocks).

Parser options (including reactVersion) are passed as a separate third argument. Uses Symbol.for('react.transitional.element') by default (React 19). Pass reactVersion: 18 for React 18 and older.

@param input

The markdown string or buffer to parse

@param components

Component overrides keyed by HTML tag name

@param options

Parser options and element symbol configuration

@returns

A React Fragment element containing the parsed markdown

// Use directly as a component return value
function Markdown({ text }: { text: string }) {
  return Bun.markdown.react(text);
}

// Server-side rendering
import { renderToString } from "react-dom/server";
const html = renderToString(Bun.markdown.react("# Hello **world**"));

// Custom components receive element props
function Code({ language, children }: { language?: string; children: React.ReactNode }) {
  return <pre data-language={language}><code>{children}</code></pre>;
}
function Link({ href, children }: { href: string; children: React.ReactNode }) {
  return <a href={href} target="_blank">{children}</a>;
}
const el = Bun.markdown.react(text, { pre: Code, a: Link });

// For React 18 and older
const el18 = Bun.markdown.react(text, undefined, { reactVersion: 18 });

Referenced types

interface ComponentOverrides

Component overrides for react().

Replace default HTML tags with custom React components. Each override receives the same props the default element would get.

function Code({ language, children }: { language?: string; children: React.ReactNode }) {
  return <pre data-language={language}><code>{children}</code></pre>;
}
Bun.markdown.react(text, { pre: Code });

interface ReactOptions

Options for react() — parser options and element symbol configuration.

  • collapseWhitespace?: boolean

    Collapse whitespace in text content. Default: false.

  • hardSoftBreaks?: boolean

    Treat soft line breaks as hard line breaks. Default: false.

  • headings?: boolean | { autolink: boolean; ids: boolean }

    Configure heading IDs and autolink headings. Pass true to enable both heading IDs and autolink headings, or an object to configure individually.

    // Enable both heading IDs and autolink headings
{ headings: true }
// Enable only heading IDs
{ headings: { ids: true } }
  • latexMath?: boolean

    Enable LaTeX math ($inline$ and $$display$$). Default: false.

  • noHtmlBlocks?: boolean

    Disable HTML blocks. Default: false.

  • noHtmlSpans?: boolean

    Disable inline HTML spans. Default: false.

  • noIndentedCodeBlocks?: boolean

    Disable indented code blocks. Default: false.

  • permissiveAtxHeaders?: boolean

    Allow ATX headers without a space after #. Default: false.

  • reactVersion?: 18 | 19

    Which $$typeof symbol to use on the generated elements.

    • 19 (default): Symbol.for('react.transitional.element')
    • 18: Symbol.for('react.element') — use this for React 18 and older
  • strikethrough?: boolean

    Enable GFM strikethrough (~~text~~). Default: true.

  • tables?: boolean

    Enable GFM tables. Default: true.

  • tagFilter?: boolean

    Enable the GFM tag filter, which replaces < with &lt; for disallowed HTML tags (e.g. <script>, <style>, <iframe>). Default: false.

  • tasklists?: boolean

    Enable GFM task lists (- [x] item). Default: true.

  • underline?: boolean

    Enable underline syntax (__text__ renders as <u> instead of <strong>). Default: false.