How to create a component for your Markdown pages?

This example shows you how to create a component that can be used as syntax in your Markdown pages.

The goal

The goal is to create a Planet component with the following syntax:

markdown⎘ Copy
<Planet/>

that would yield: Pluto

Steps

Create your component

Below is the Planet React Component that returns Pluto

javascript⎘ Copy
// src/components/Planet.js
export default function Planet() {
    return "Pluto"
}

Rules:

• The component should be exported as default (ie export default).
• If it's an interactive component that relies on Browser event (for click), you need to add the use client directive
• The component file name should have the extension jsx, tsx or js.

Register it

To register it automatically, you can save it in the markdown component directory (By default, src/components/markdowns)

You can also register it manually by:

• adding it in the components section of the configuration file
• and setting the type to markdown

json⎘ Copy
{
  "components": {
    "Planet": {
      "importPath": "src/components/Planet.js",
      "type": "markdown"
    }
  }
}

Verify the registration

You should see your component in the config list.

bash⎘ Copy
interact config --filter="components"

Use it

You can now use it in a Markdown page

markdown⎘ Copy
<Planet/>

It will yield: Pluto

Credits

This example is based on the example of the official mdx documentation