> ## Documentation Index
> Fetch the complete documentation index at: https://omer-914cc1c6.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Extraits réutilisables

> Extraits personnalisés et réutilisables pour maintenir le contenu synchronisé

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

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

**Précondition** : Vous devez créer votre fichier d’extrait dans le répertoire `snippets` pour que l’import fonctionne.

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

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

1. Ajoutez le contenu à réutiliser dans votre fichier d’extrait. Vous pouvez éventuellement ajouter des variables qui pourront être renseignées via des props
   lors de l’import de l’extrait. Dans cet exemple, notre variable est word.

```typescript snippets/my-snippet.mdx theme={null}
Bonjour le monde ! Voici mon contenu que je souhaite réutiliser sur plusieurs pages. 
```

2. Importez l’extrait dans le fichier de destination.

```typescript destination-file.mdx theme={null}
---
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">
  ### Exportation avec variables
</div>

1. Vous pouvez, si vous le souhaitez, ajouter des variables qui pourront être renseignées via des props lors de l’import de l’extrait. Dans cet exemple, notre variable est word.

```typescript snippets/my-snippet.mdx theme={null}
Mon mot-clé du jour est {word}.
```

2. Importez l’extrait dans votre fichier de destination en passant la variable. La propriété sera renseignée selon vos spécifications.

```typescript destination-file.mdx theme={null}
---
title: Mon titre
description: Ma description
---

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

## En-tête

Lorem ipsum dolor sit amet.

<MySnippet word="bananas" />

```

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

1. Exportez une variable depuis votre fichier de snippet :

```typescript snippets/path/to/custom-variables.mdx theme={null}
export const myName = 'my name';

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

2. Importez l’extrait depuis votre fichier de destination et utilisez la variable :

```typescript destination-file.mdx theme={null}
---
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">
  ### Extraits JSX
</div>

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

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

<Note>
  Important : Lors de la création d’extraits 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 l’extrait depuis votre fichier de destination et utilisez le composant :

```typescript destination-file.mdx theme={null}
---
title: Mon titre
description: Ma description
---

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

<MyJSXSnippet />
```