@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/sync'; // 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,
    // if allowedRules is undefined, you must define a renderer for every node type
  );

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

If you have not provided a renderer for a node type in the AST, the render will fail. You can tune this by either explicitly passing a list of allowedRules to the parser or by adding the renderer to renderers.

Build

pnpm build