> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify-mintlify-add-hello-world-quickstart-48843.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Snippets réutilisables

> Snippets personnalisés et réutilisables pour garder le contenu synchronisé

L’un des principes fondamentaux du développement logiciel est DRY (Don’t Repeat
Yourself), qui s’applique aussi à la documentation.
Si vous répétez le même contenu à plusieurs endroits, créez un Snippet personnalisé pour garder votre contenu synchronisé.

<div id="creating-a-custom-snippet">
  ## Créer un Snippet personnalisé
</div>

**Précondition** : vous devez créer votre fichier de Snippet dans le répertoire `snippets` afin que l'import fonctionne.

Toute page située dans le répertoire `snippets` sera traitée comme un Snippet et ne sera pas
rendu en page autonome. Si vous souhaitez créer une page autonome
à partir du Snippet, importez le Snippet dans un autre fichier et utilisez-le comme
composant.

<div id="default-export">
  ### Export par défaut
</div>

1. Ajoutez le contenu à votre fichier de Snippet que vous souhaitez réutiliser. Vous pouvez éventuellement ajouter des variables qui pourront être renseignées via des props
   lors de l'import du Snippet. Dans cet exemple, notre variable est word.

```typescript snippets/mon-extrait.mdx
Bonjour le monde ! Voici un contenu que je souhaite réutiliser sur plusieurs pages. 
```

2. Importez le Snippet dans votre fichier de destination.

```typescript fichier-de-destination.mdx
---
title: Mon titre
description: Ma description
---

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

## En-tête

Lorem ipsum dolor sit amet.

<MySnippet/>

```

<div id="exporting-with-variables">
  ### Exporter avec des variables
</div>

1. Vous pouvez éventuellement ajouter des variables à renseigner via des props lorsque vous importez le Snippet. Dans cet exemple, notre variable est word.

```typescript snippets/mon-extrait.mdx
Mon mot du jour est {word}.
```

2. Importez le Snippet dans votre fichier de destination en utilisant la variable. La propriété sera renseignée selon votre spécification.

```typescript fichier-de-destination.mdx
---
title: Mon titre
description: Ma description
---

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

## En-tête

Lorem impsum dolor sit amet.

<MySnippet word="bananes" />

```

<div id="reusable-variables">
  ### Variables réutilisables
</div>

1. Exportez une variable depuis votre fichier de Snippet :

```typescript snippets/path/to/custom-variables.mdx
export const myName = 'mon nom';

export const myObject = { fruit: 'fraises' };
```

2. Importez le Snippet depuis votre fichier de destination et utilisez la variable :

```typescript fichier-de-destination.mdx
---
title: Mon titre
description: Ma description
---

import { myName, myObject } from '/snippets/path/to/custom-variables.mdx';

Bonjour, je m’appelle {myName} et j’aime {myObject.fruit}.
```

<div id="jsx-snippets">
  ### Snippets JSX
</div>

1. Exportez un composant JSX depuis votre fichier de Snippet. (Voir [Composants React](/fr/react-components) pour plus d’informations) :

```js icon=square-js snippets/my-jsx-snippet.jsx
export const MyJSXSnippet = () => {
  return (
    <div>
      <h1>Bonjour, le monde&nbsp;!</h1>
    </div>
  )
}
```

<Note>
  Important : lors de la création de Snippets JSX, utilisez la syntaxe de fonction fléchée (`=>`) plutôt que des déclarations de fonction. Le mot-clé `function` n’est pas pris en charge dans ce contexte.
</Note>

2. Importez le Snippet dans votre fichier cible et utilisez le composant :

```typescript fichier-destination.mdx
---
title: Mon titre
description: Ma description
---

import { MyJSXSnippet } from '/snippets/my-jsx-snippet.jsx';

<MyJSXSnippet />
```