How do I embed global React components in Docusaurus v2?

Question

I see that it is possible to embed React components with MDX:
https://v2.docusaurus.io/docs/markdown-features/#embedding-react-components-with-mdx

However, this method works for a specific page. How can I make it work for all markdown files in the docs? I am trying to add a similar component as in the link above to change the style of some inline text. I tried to edit src/pages/index.js but it didn't work.

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

What is all markdown files "in the user manual"? – Yangshun Tay May 28 '20 at 11:31 — Yangshun Tay, May 28 '20 at 11:31
@YangshunTay I meant the "docs". I updated my question. – Onur Zobi May 29 '20 at 23:09 — Onur Zobi, May 29 '20 at 23:09

score 0 · Answer 1 · answered May 29 '21 at 23:20

0

It seems now you could "swizzle" the root component, by creating a website/src/theme/Root.js file, according to: https://docusaurus.io/docs/using-themes#wrapper-your-site-with-root

answered May 29 '21 at 23:20

Rex Wang

368
2
5

How do you modify Root.js to include the global components? – brendangibson Feb 24 '22 at 23:58

score 0 · Answer 2 · answered Feb 25 '22 at 00:57

0

yarn swizzle @docusaurus/theme-classic MDXComponents --danger

In src/theme/MDXComponents/index.js:

import {MyComponent} from "/src/components/MyComponent";
...
const MDXComponents = {
    MyComponent,
    ...

answered Feb 25 '22 at 00:57

brendangibson

2,377
2
21
36

score 0 · Answer 3 · answered Jul 03 '23 at 12:22

However, this method works for a specific page.

In the documentation there is the example where you can create a file for component:

// src/components/Highlight.js
import React from 'react';

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

It can be used in any page but you should add a reference:

import Highlight from '@site/src/components/Highlight';

<Highlight color="#25c2a0">Docusaurus green</Highlight>

So, you may define component once in a file and use it.

If you mean that you want to omit import statement and use component with implicit import then only way to do it in the theme. Documentation says:

If you want to register extra tag names (like the tag above), you should consider wrapping @theme/MDXComponents, so you don't have to maintain all the existing mappings. Since the swizzle CLI doesn't allow wrapping non-component files yet, you should manually create the wrapper:

import React from 'react';
// Import the original mapper
import MDXComponents from '@theme-original/MDXComponents';
import Highlight from '@site/src/components/Highlight';

export default {
  // Re-use the default mapping
  ...MDXComponents,
  // Map the "<Highlight>" tag to our Highlight component
  // `Highlight` will receive all props that were passed to `<Highlight>` in MDX
  Highlight,
};

@brendangibson provides commands for creating theme.

How do I embed global React components in Docusaurus v2?

3 Answers3