@temelj/mdx-react

Helpers for rendering MDX with React.

jsr   •   npm   •   Issues   •   @tinrab

Installation

# npm
$ npm install @temelj/mdx-react
# jsr
$ deno add jsr:@temelj/mdx-react # or jsr add @temelj/mdx-react

Usage

To render the MDX artifact, you call the createMdxContent function. It will evaluate the compiled "function body" and return a React node. You can also override components with your custom ones.

import { createMdxContent, MdxCompiler } from "@temelj/mdx";

const compiler = new MdxCompiler();
const page = await compiler.compile(source, {
  mdxOptions: {
    // This is always 'function-body'.
    // outputFormat: "function-body",
    // Or 'undefined' if rendering server-side as a RSC.
    providerImportSource: "@mdx-js/react",
  },
});

const node = createMdxContent({ artifact: page }, mdxPageComponents);

const rendered = <div>{node}</div>;

You will also need to include a CSS file. You can find an example in ./examples/mdx-react/basic.