Reusable Snippets
Reusable, custom snippets to keep content in sync
One of the core principles of software development is DRY (Don’t Repeat Yourself). This is a principle that applies to documentation as well. If you find yourself repeating the same content in multiple places, you should consider creating a custom snippet to keep your content in sync.
Creating a custom snippet
Pre-condition: You must create your snippet file in the snippets
directory.
Any page in the snippets
directory will be treated as a snippet and will not
be rendered into a standalone page. If you want to create a standalone page
from the snippet, import the snippet into another file and call it as a
component.
Default export
- Add content to your snippet file that you want to re-use across multiple locations. Optionally, you can add variables that can be filled in via props when you import the snippet.
Hello world! This is my content I want to reuse across pages. My keyword of the
day is {word}.
The content that you want to reuse must be inside the snippets
directory in
order for the import to work.
- Import the snippet into your destination file.
---
title: My title
description: My Description
---
import MySnippet from '/snippets/path/to/my-snippet.mdx';
## Header
Lorem impsum dolor sit amet.
<MySnippet word="bananas" />
Reusable variables
- Export a variable from your snippet file:
export const myName = 'my name';
export const myObject = { fruit: 'strawberries' };
- Import the snippet from your destination file and use the variable:
---
title: My title
description: My Description
---
import { myName, myObject } from '/snippets/path/to/custom-variables.mdx';
Hello, my name is {myName} and I like {myObject.fruit}.
Reusable components
- Inside your snippet file, create a component that takes in props by exporting your component in the form of an arrow function.
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.
- Import the snippet into your destination file and pass in the props
---
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.
{/* `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>
}
}
Was this page helpful?