Skip to content

useMdxComponents should be part of the readme? #110

@Blankeos

Description

@Blankeos
//Parent
    <MDXProvider
      components={{
        code(props: any): JSX.Element {
          const [ref, setRef] = createSignal<HTMLPreElement | undefined>();

          createEffect(async () => {
            const current = ref();
            const content = props.children;

            if (current && content) {
              const result = await codeToHtml(content, {
                lang: 'typescript',
                theme: 'vitesse-dark',
              });
              current.innerHTML = result;
            }
          });

          return <div ref={setRef}></div>;
        },
      }}
    >
      {props.children}
    </MDXProvider>
// Child (Doesn't work) ❌
import Awesome from "./awesome.mdx"

// ...
return (
   <Awesome />
)
// Child (Works)  ✅
import Awesome from "./awesome.mdx"

// ...

// @ts-ignore (Also, there seems to be a bug on just Types for this atm, I can't get rid of the error unless I ts-ignore it)
const components = useMdxComponents();

return (
   <Awesome components={components} />
)

I think this should be part of the docs because I was more under the impression that if I had the context wrapped, I won't need to manually consume it. (Similar to this: https://stackoverflow.com/a/56636389/8622733). So I think it's important to note that it needs to be manually consumed.

Second, any solutions to the type error when using useMdxComponents()?

Version currently installed 1.1.4

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions