Reusable Components

Reusable, custom component snippets

Much like custom content snippets that can be added in MDX files, you can add reusable components as snippets.

Creating a reusable React component

1. Inside your snippet file, create a component that takes in props by exporting your component in the form of an arrow function.

snippets/custom-component.mdx

export const MyComponent = ({ title }) => (
  <div>
    <h1>{title}</h1>
    <p>... snippet content ...</p>
  </div>
);

MDX does not compile inside the body of an arrow function. Stick to HTML syntax when you can or use a default export if you need to use MDX inside of your component.

2. Import the snippet into your destination file and pass in the props

destination-file.mdx

---
title: My title
description: My Description
---

import { MyComponent } from '/snippets/custom-component.mdx';

Lorem ipsum dolor sit amet.

<MyComponent title={'Custom title'} />

Client-Side Content

By default, Mintlify employs server-side rendering, generating content at build time. For client-side content loading, ensure to verify the document object’s availability before initiating the rendering process.

snippets/client-component.mdx

{/* `setTimeout` simulates a React.useEffect, which is called after the component is mounted. */}
export const ClientComponent = () => {
  if (typeof document === "undefined") {
    return null;
  } else {
    setTimeout(() => {
      const clientComponent = document.getElementById("client-component");
      if (clientComponent) {
        clientComponent.innerHTML = "Hello, client-side component!";
      }
    }, 1);

    return <div id="client-component"></div>
  }
}