--- id: react description: Using the power of React in Docusaurus Markdown documents, thanks to MDX slug: /markdown-features/react --- # MDX and React ```mdx-code-block import BrowserWindow from '@site/src/components/BrowserWindow'; import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import styles from './markdown-features-react.module.css'; ``` ## Using JSX in Markdown {#using-jsx-in-markdown} Docusaurus has built-in support for [MDX v1](https://mdxjs.com/), which allows you to write JSX within your Markdown files and render them as React components. :::note While Docusaurus parses both `.md` and `.mdx` files using MDX, some of the syntaxes are treated slightly differently by third-party tools. For the most accurate parsing and better editor support, we recommend using the `.mdx` extension for files containing MDX syntax. ::: Check out the [MDX docs](https://mdxjs.com/) to see what other fancy stuff you can do with MDX. ### Exporting components {#exporting-components} To define any custom component within an MDX file, you have to export it: only paragraphs that start with `export` will be parsed as components instead of prose. ```jsx export const Highlight = ({children, color}) => ( {children} ); Docusaurus green and Facebook blue are my favorite colors. I can write **Markdown** alongside my _JSX_! ``` Notice how it renders both the markup from your React component and the Markdown syntax: ```mdx-code-block export const Highlight = ({children, color}) => ( {children} ); Docusaurus green {` `}and Facebook blue are my favorite colors. I can write **Markdown** alongside my _JSX_! ``` :::caution MDX is JSX Since all doc files are parsed using MDX, anything that looks like HTML is actually JSX. Therefore, if you need to inline-style a component, follow JSX flavor and provide style objects. ```jsx /* Instead of this: */ Foo /* Use this: */ Foo ``` This behavior is different from Docusaurus 1. See also [Migrating from v1 to v2](../../migration/migration-manual.md#convert-style-attributes-to-style-objects-in-mdx). In addition, MDX is not [100% compatible with CommonMark](https://github.com/facebook/docusaurus/issues/3018). Use the **[MDX playground](https://mdx-git-renovate-babel-monorepo-mdx.vercel.app/playground)** to ensure that your syntax is valid MDX. ::: ### Importing components {#importing-components} You can also import your own components defined in other files or third-party components installed via npm. ```md import TOCInline from '@theme/TOCInline'; import Button from '@mui/material/Button'; import BrowserWindow from '@site/src/components/BrowserWindow'; ``` :::tip The `@site` alias points to your website's directory, usually where the `docusaurus.config.js` file is. Using an alias instead of relative paths (`'../../src/components/BrowserWindow'`) saves you from updating import paths when moving files around, or when [versioning docs](../docs/versioning.md) and [translating](../../i18n/i18n-tutorial.md). ::: While declaring components within Markdown is very convenient for simple cases, it becomes hard to maintain because of limited editor support, risks of parsing errors, and low reusability. Use a separate `.js` file when your component involves complex JS logic: ```jsx title="src/components/Highlight.js" import React from 'react'; export default function Highlight({children, color}) { return ( {children} ); } ``` ```md title="markdown-file.mdx" import Highlight from '@site/src/components/Highlight'; Docusaurus green ``` :::tip If you use the same component across a lot of files, you don't need to import it everywhere—consider adding it to the global scope. [See below](#mdx-component-scope) ::: ### MDX component scope {#mdx-component-scope} Apart from [importing a component](#importing-components) and [exporting a component](#exporting-components), a third way to use a component in MDX is to **register it to the global scope**, which will make it automatically available in every MDX file, without any import statements. For example, given this MDX file: ```md - a - list! And some custom markup... ``` It will be compiled to a React component containing `ul`, `li`, `p`, and `highlight` tags. Now, you can optionally provide your own implementation for any of these tags in the form of React components. (`highlight` isn't even an intrinsic element: it needs an implementation!) In Docusaurus, this MDX component scope is provided by the `@theme/MDXComponents` component. It's not a React component, _per se_, unlike most other exports under the `@theme/` alias: it is a record from tag names like `ul` and `img` to their custom implementations. If you [swizzle](../../swizzling.md) this component, you will find all tags that have been re-implemented, and you can further customize our implementation by swizzling the respective sub-component, like `@theme/MDXComponents/Head` (which is used to implement the [``](./markdown-features-head-metadata.mdx) feature). If you want to register extra tag names (like the `` tag above), you should consider [wrapping `@theme/MDXComponents`](../../swizzling.md#wrapping), 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: ```js title="src/theme/MDXComponents.js" import React from 'react'; // Import the original mapper import MDXComponents from '@theme-original/MDXComponents'; // highlight-next-line import Highlight from '@site/src/components/Highlight'; export default { // Re-use the default mapping ...MDXComponents, // Map the "highlight" tag to our component! // `Highlight` will receive all props that were passed to `highlight` in MDX // highlight-next-line highlight: Highlight, }; ``` And now, you can freely use `` in every page, without writing the import statement: ```md I can conveniently use Docusaurus green everywhere! ``` ```mdx-code-block I can conveniently use Docusaurus green everywhere! ``` :::info We use lower-case tag names like `highlight` to "pretend" that they are intrinsic elements, but you can use capitalized ones like `Highlight` as well. ::: ### Markdown and JSX interoperability {#markdown-and-jsx-interoperability} Docusaurus v2 is using MDX v1, which has a lot of known cases where the content fails to be correctly parsed as Markdown. Use the **[MDX playground](https://mdx-git-renovate-babel-monorepo-mdx.vercel.app/playground)** to ensure that your syntax is valid MDX.
Samples of parsing failures **A paragraph starting with a JSX tag will be seen entirely as a JSX string:** ```mdx-code-block
``` ```jsx Highlighted text but afterwards _Markdown_ **doesn't work** ``` ```mdx-code-block
Highlighted text but afterwards _Markdown_ **doesn't work**
Use JSX for the rest of the line, or prefix the line with some plain text:
``` ```jsx Use JSX for the paragraph to stop worrying about Markdown← This is a zero-width space and afterwards Markdown works ``` ```mdx-code-block
Use JSX for the paragraph to stop worrying about Markdown← This is a zero-width space and afterwards Markdown works
**Markdown within a JSX tag never works:**
``` ```jsx **Bold doesn't work** ``` ```mdx-code-block
**Bold doesn't work**
Use JSX within JSX tag, or move the Markdown to the outer layer:
``` ```jsx Bold now works **Bold now works** ``` ```mdx-code-block
Bold now works **Bold now works**
**Text immediately below a JSX tag will be seen as JSX text:**
``` ```jsx
**Bold still doesn't work**
``` ```mdx-code-block
**Bold still doesn't work**
Add an empty new line:
``` ```jsx
**Bold now works**
``` ```mdx-code-block
**Bold now works**
**Markdown text indented by four spaces will be seen as a code block:**
``` ```jsx
You may think I'm just some text...
``` ```mdx-code-block
You may think I'm just some text...
Don't indent:
``` ```jsx
Now I'm actually just text
``` ```mdx-code-block
Now I'm actually just text
``` ## Importing code snippets {#importing-code-snippets} You can not only import a file containing a component definition, but also import any code file as raw text, and then insert it in a code block, thanks to [Webpack raw-loader](https://webpack.js.org/loaders/raw-loader/). In order to use `raw-loader`, you first need to install it in your project: ```bash npm2yarn npm install --save raw-loader ``` Now you can import code snippets from another file as it is: ```jsx title="myMarkdownFile.mdx" import CodeBlock from '@theme/CodeBlock'; import MyComponentSource from '!!raw-loader!./myComponent'; {MyComponentSource} ``` ```mdx-code-block import CodeBlock from '@theme/CodeBlock'; import MyComponentSource from '!!raw-loader!@site/src/pages/examples/_myComponent'; {MyComponentSource} ``` See [using code blocks in JSX](./markdown-features-code-blocks.mdx#usage-in-jsx) for more details of the `` component. :::note You have to use `` rather than the Markdown triple-backtick ` ``` `, because the latter will ship out any of its content as-is, but you want to interpolate the imported text here. ::: :::warning This feature is experimental and might be subject to breaking API changes in the future. ::: ## Importing Markdown {#importing-markdown} You can use Markdown files as components and import them elsewhere, either in Markdown files or in React pages. By convention, using the **`_` filename prefix** will not create any doc page and means the markdown file is a **"partial"**, to be imported by other files. ```md title="_markdown-partial-example.mdx" Hello {props.name} This is text some content from `_markdown-partial-example.mdx`. ``` ```jsx title="someOtherDoc.mdx" import PartialExample from './_markdown-partial-example.mdx'; ; ``` ```mdx-code-block import PartialExample from './_markdown-partial-example.mdx'; ``` This way, you can reuse content among multiple pages and avoid duplicating materials. :::caution Currently, the table of contents does not contain the imported Markdown headings. This is a technical limitation that we are trying to solve ([issue](https://github.com/facebook/docusaurus/issues/3915)). ::: ## Available exports {#available-exports} Within the MDX page, the following variables are available as globals: - `frontMatter`: the front matter as a record of string keys and values; - `toc`: the table of contents, as a tree of headings. See also [Inline TOC](./markdown-features-toc.mdx#inline-table-of-contents) for a more concrete use-case. - `contentTitle`: the Markdown title, which is the first `h1` heading in the Markdown text. It's `undefined` if there isn't one (e.g. title specified in the front matter). ```jsx import TOCInline from '@theme/TOCInline'; import CodeBlock from '@theme/CodeBlock'; The table of contents for this page, serialized: {JSON.stringify(toc, null, 2)} The front matter of this page:
    {Object.entries(frontMatter).map(([key, value]) =>
  • {key}: {value}
  • )}

The title of this page is: {contentTitle}

``` ```mdx-code-block import TOCInline from '@theme/TOCInline'; The table of contents for this page, serialized: {JSON.stringify(toc, null, 2)} The front matter of this page:
    {Object.entries(frontMatter).map(([key, value]) =>
  • {key}: {value}
  • )}

The title of this page is: {contentTitle}

```