Skip to main content
Um dos princípios do desenvolvimento de software é DRY (Don’t Repeat Yourself). Isso também vale para documentação. Se você repetir o mesmo conteúdo em vários lugares, considere criar um trecho personalizado para mantê-lo sincronizado.

​
Criar um trecho personalizado

Pré-requisito: o arquivo do trecho deve estar no diretório snippets.
Qualquer página em snippets é tratada como trecho e não vira página sozinha. Para uma página independente, importe o trecho em outro arquivo e use como componente.

​
Export padrão

  1. Adicione o conteúdo que deseja reutilizar. Opcionalmente use variáveis preenchidas por props na importação.
snippets/my-snippet.mdx
Hello world! This is my content I want to reuse across pages. My keyword of the
day is {word}.
O conteúdo reutilizável deve ficar dentro de snippets para o import funcionar.
  1. Importe o trecho no arquivo de destino.
destination-file.mdx
---
title: My title
description: My Description
---

import MySnippet from '/snippets/path/to/my-snippet.mdx';

## Header

Lorem impsum dolor sit amet.

<MySnippet word="bananas" />

​
Variáveis reutilizáveis

  1. Exporte variáveis a partir do trecho:
snippets/path/to/custom-variables.mdx
export const myName = 'my name';

export const myObject = { fruit: 'strawberries' };
  1. Importe e use no destino:
destination-file.mdx
---
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}.

​
Componentes reutilizáveis

  1. No trecho, exporte um componente com props como arrow function.
snippets/custom-component.mdx
export const MyComponent = ({ title }) => (
  <div>
    <h1>{title}</h1>
    <p>... snippet content ...</p>
  </div>
);
MDX não compila dentro do corpo de uma arrow function. Use HTML quando possível ou export default se precisar de MDX.
  1. Importe no destino e passe 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'} />