Migrate import { mdx } from "@mdx-js/react"; to v2

[wereHamster]

I've used import { mdx } from "@mdx-js/react"; from my components for easy access to render mdx component from my own JSX code (eg. {mdx("h3", {}, "Heading")}. What's the way to do that in v2?

[wereHamster]

Tried this:

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

const components = useMDXComponents()

<components.h3>Heading</components.h3>

but does not type check:

JSX element type 'components.h3' does not have any construct or call signatures.ts(2604)

But it works (ie. heading shows up, does not crash app).

[wooorm]

That was indeed removed.
Glad that that code works for you. Perhaps the types can be improved, PR likely welcome for that.
But it does feel a bit weird? If you can import stuff in your code, then you could also import the h3 you want to use?

[wereHamster]

If I import the component directly the the user of my library can't override it.

[wooorm]

Then I’d recommend doing stuff like how MDX itself does it (the code it generates). mdx (the function) was slow because it was tracking the context always. It’s faster if you don’t.

E.g., I mean something like:

const _components = Object.assign({h1: 'h1'}, useMDXComponents(), perhapsYouAlsoSupportExplicitComponents)
<_components.h1>...</_components.h1>