@discord/markdown-react

Platform-agnostic React library for rendering Discord Markdown. Takes an AST and turns it into React elements.

Usage

import { NodeList } from '@discord/markdown-react';
import { parse } from '@discord/markdown-wasm'; // or @discord/markdown-react-native

function Text({ children }) {
  return <span>{children}</span>;
}

function Paragraph({ children }) {
  return <span>{children}</span>;
}

const renderers = {
  text: Text,
  paragraph: Paragraph,
  quote: Quote,
  ...otherRenderers, // define renderers for other node types
};

export function Markdown({ content }) {
  const ast = parse(
    content,
    // without flags every syntax parses, so you must define a renderer for every node type
  );

  return <NodeList nodes={ast} renderers={renderers} />;
}

Outside Node, @discord/markdown-wasm needs an await init() before the first parse; see its README.

If you have not provided a renderer for a node type in the AST, the render will fail. You can tune this by either passing the parser flags that leave out the syntax that produces it (e.g. Syntax.ALL & ~Syntax.MENTIONS) or by adding the renderer to renderers.

Build

pnpm build