Overview

$ pnpm add @m2d/react-markdown

$ npm install @m2d/react-markdown

$ yarn add @m2d/react-markdown

import { Md } from "@m2d/react-markdown";

export default function Article() {
  return (
    <article className="prose">
      <Md>{"# Hello World\n\nRendered on the server with zero client hooks!"}</Md>
    </article>
  );
}

"use client";

import { useRef } from "react";
import { Md } from "@m2d/react-markdown/client";
import { toDocx } from "mdast2docx";

export function DocumentationViewer({ markdown }: { markdown: string }) {
  const astRef = useRef<{ mdast: any; hast: any }[]>([]);

  const handleExport = async () => {
    if (!astRef.current[0]?.mdast) return;
    const blob = await toDocx(astRef.current[0].mdast);
    const url = URL.createObjectURL(blob as Blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "document.docx";
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div>
      <button onClick={handleExport}>Export to Word</button>
      <Md astRef={astRef}>{markdown}</Md>
    </div>
  );
}