How to render mdx from a constant using custom components?

[elVengador]

for example, I have a constant

const myMdx = "<MyButton>Hi</MyButton>"

Now I want to render myMdx using MyButton component, How can I render myMdx with my components?

[zfben]

You should try it in playground:

export const MyButton = (props) => <button>{props.text}</button>

<MyButton text='Hi' />

More details is here: https://mdxjs.com/docs/using-mdx/#components

[elVengador]

I dont want to define my custom components into the mdx, I want to use my components into mdx, but my mdx is on a constant

[remcohaszing]

You can use evaluate.

[elVengador]

I tried the evaluate function, but I dont know how to pass my custom components

I tried this:

<MDXProvider components={components}>
    <MdxPreview content={selectedNote.content} />
</MDXProvider>

and I defined my components like this:

const components = {
  h1: H1,
  Collapsible: Collapsible,
};

This is how I use the evaluate method:

// MdxPreview
import React, { useEffect, useState } from "react";
import { evaluate } from "@mdx-js/mdx";
import * as runtime from "react/jsx-runtime";

type MdxPreviewProps = { content: string };
export const MdxPreview = ({ content }: MdxPreviewProps) => {
  const exports = useMDX(content);
  const Content = exports.default;
  return <Content />;
};

function useMDX(content: string) {
  const [exports, setExports] = useState({ default: runtime.Fragment });

  useEffect(() => {
    evaluate(content, { ...(runtime as any) }).then((exports) =>
      setExports(exports as any)
    );
  }, [content]);

  return exports;
}

Finally this is my mdx value on selectedNote.content

<Collapsible title="My title here">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem
</Collapsible>

[ChristianMurphy]

I tried the evaluate function, but I dont know how to pass my custom components

the default return from evaluate, is a react component.
When you render it on the page, pass that component a components={} prop.

<MDXProvider components={components}>

avoid using Provider when possible, it is more complex than is needed in most cases.

[elVengador]

yeah, I solved in that way but It works only if setup the evaluate function with useMDXComponents, thank yoou any way

import { useMDXComponents } from "@mdx-js/react";

const res = await evaluate(newContent, {
        ...(runtime as any),
        useMDXComponents,
      });