Generally available React component

[ghost]

In this example one can see that one can teach MDX to load components globally.

I've also seen https://docusaurus.io/examples/markdownPageExample#import-code-block-from-source-code-file, but it does not mention global loading.

How would I teach docusaurus to load all components globally?

#layout.js
import React from "react"
import { MDXProvider } from "@mdx-js/react"
import { Highlight } from "./contributor"

const shortcodes = { Highlight }

export default function Layout({ children }) {
  return (
    <MDXProvider components={shortcodes}>{children}</MDXProvider>
  )
}

#contributor.jsx
import React from 'react'

export const Highlight = ({children, color}) => (
  <span
    style={{
      backgroundColor: color,
      borderRadius: '2px',
      color: '#fff',
      padding: '0.2rem',
    }}>
    {children}
  </span>
);

The missing piece is how to teach docusaurus to load that file too, any input is welcome 🍻

[slorber]

You mean you want to avoid writing MDX imports?

For now the only solution I can think of is by swizzling @theme/MDXComponents and add your custom components to the list.

It is definitively something I'd like to allow through simple configuration, and also make sure most useful MDX components from the theme are available by default (like the tabs), without the need to import them

[mambax]

Yeah, that is exactly what I mean. So I do not manually need to write the import. It's fine though, I will just import until one day one can import by configuration.

Should I create an issue so we can track it and others could give their 2¢?