> ## Documentation Index > Fetch the complete documentation index at: https://www.mintlify.com/docs/llms.txt > Use this file to discover all available pages before exploring further. > ## Agent Instructions > To set up a new Mintlify project for a user, follow the agent setup workflow in https://www.mintlify.com/docs/quickstart.md. > For plans and pricing, see https://www.mintlify.com/pricing.md. # Bibliothèques tierces > Importez des composants React depuis des paquets npm, tels que des graphiques et des composants de design system, dans vos pages MDX. > [!NOTE] > > Les bibliothèques tierces nécessitent un [forfait Enterprise](https://mintlify.com/pricing?ref=third-party-libraries). Contactez votre gestionnaire de compte pour les activer sur votre site. Utilisez des composants issus de paquets npm, tels que des graphiques ou votre propre design system, dans vos pages MDX. Lors du déploiement, Mintlify installe les paquets de votre lockfile, rend chaque composant en HTML et charge son JavaScript dans le navigateur. > [!WARNING] > > N'installez que des paquets de confiance. Le code des paquets s'exécute avec le même accès que la page, y compris le contenu de la page et tout ce que le navigateur du lecteur stocke pour votre site. Il peut effectuer des requêtes réseau vers n'importe quel serveur. Supprimer un paquet ou annuler un déploiement n'arrête pas le code déjà chargé dans le navigateur d'un lecteur. Les bibliothèques tierces ne sont pas disponibles sur les sites qui utilisent l'[authentification](/docs/fr/deploy/authentication-setup) ou la [personnalisation](/docs/fr/create/personalization). Les déploiements qui incluent `packages` dans `docs.json` échouent sur ces sites. ## Ajouter un paquet **1. Listez vos dépendances** Créez un fichier `package.json` dans le même dossier que votre fichier `docs.json`. Listez chaque paquet que vous importez sous `dependencies`, y compris `react` et `react-dom`. ```json package.json theme={null} { "private": true, "dependencies": { "@acme/charts": "^2.0.0", "react": "^18.3.1", "react-dom": "^18.3.1" } } ``` Mintlify installe uniquement les `dependencies`. Les paquets listés uniquement dans `devDependencies` ou `peerDependencies` ne sont pas disponibles pour vos pages. **2. Commitez un lockfile** Installez vos dépendances et commitez le lockfile à côté de `package.json`. ```bash pnpm theme={null} pnpm install ``` ```bash npm theme={null} npm install ``` Mintlify installe les versions exactes de votre lockfile. Il prend en charge `pnpm-lock.yaml` version 9 de pnpm et `package-lock.json` de npm. Les lockfiles Yarn et Bun ne sont pas pris en charge. **3. Activez les paquets** Ajoutez la clé `packages` à votre `docs.json`. Un objet vide active les paquets avec les paramètres par défaut. ```json docs.json theme={null} { "packages": {} } ``` **4. Importez un composant** Créez un composant dans votre dossier `snippets` qui importe depuis le paquet. ```jsx snippets/requests-chart.jsx theme={null} import { LineChart } from "@acme/charts"; const data = [ { day: "Mon", requests: 120 }, { day: "Tue", requests: 180 }, { day: "Wed", requests: 150 }, ]; export const RequestsChart = () => ( ); ``` Importez-le ensuite dans une page : ```mdx theme={null} import { RequestsChart } from "/snippets/requests-chart.jsx"; ``` **5. Déployez** Poussez vos modifications. Si un paquet ne peut pas être installé ou compilé, le déploiement échoue avec une erreur qui indique le paquet et le problème. Pour prévisualiser en local, installez vos dépendances puis exécutez [`mint dev`](/docs/fr/cli/preview) depuis le dossier contenant votre fichier `docs.json`. ## Utiliser des composants de paquets Vous pouvez également importer des composants directement depuis un paquet dans une page MDX : ```mdx theme={null} import { Tooltip } from "@acme/ui"; Usage ``` * Placez les composants de paquets sur leurs propres lignes. Ils ne fonctionnent pas à l'intérieur d'un paragraphe, d'une cellule de tableau ou de texte en ligne. * Passez directement les chaînes, nombres et booléens comme props. Pour les fonctions, tableaux, objets ou props JSX, écrivez un composant wrapper dans votre dossier `snippets`, comme le graphique dans [Ajouter un paquet](#add-a-package), et passez-y les valeurs. * Le Markdown à l'intérieur d'un composant de paquet est rendu en HTML brut. Les composants Mintlify, tels que les callouts et les cartes, ne sont pas rendus à l'intérieur d'un composant de paquet. ## Charger les styles des paquets Les composants peuvent importer leur propre CSS. Pour charger une feuille de style qu'un paquet fournit séparément, ajoutez son chemin dans le paquet installé à `packages.css` : ```json docs.json theme={null} { "packages": { "css": ["@acme/ui/dist/styles.css"] } } ``` Les paquets doivent fournir du CSS compilé. Mintlify n'exécute pas d'outils de build ni de plugins CSS sur le code des paquets, et ne prend pas en charge les modules CSS. Les feuilles de style des paquets ne peuvent pas charger de polices ni d'images depuis des URL distantes. Chargez plutôt les polices avec les [paramètres de polices](/docs/fr/customize/fonts) de votre site. ## Envelopper les composants dans un provider Si vos composants ont besoin d'un provider de thème ou de contexte, exportez un composant `Provider` depuis un snippet et définissez `packages.provider` sur son chemin : ```json docs.json theme={null} { "packages": { "provider": "/snippets/provider.jsx" } } ``` ```jsx snippets/provider.jsx theme={null} import { ThemeProvider } from "@acme/ui"; export const Provider = ({ children }) => {children}; ``` Le provider enveloppe chaque composant de paquet séparément. Les composants ne partagent pas d'état par son intermédiaire. ## Installer depuis un autre registre Les paquets sans scope s'installent depuis le registre npm public. Pour installer un scope depuis un registre différent, associez le scope à l'URL du registre dans `packages.registries` : ```json docs.json theme={null} { "packages": { "registries": { "@acme": "https://npm.acme.com/" } } } ``` Le registre doit utiliser HTTPS sur le port par défaut et être accessible depuis l'internet public sans identifiants. ## Limitations * **Sources des dépendances** : Les dépendances doivent être des versions du registre, des plages de versions ou des tags. Les URL Git, les chemins locaux et les alias `file:`, `link:`, `workspace:` et `npm:` ne sont pas pris en charge. * **Scripts d'installation** : Les paquets s'installent sans exécuter de scripts d'installation tels que `postinstall`. Les paquets qui en ont besoin, ou qui nécessitent des binaires natifs, ne fonctionnent pas. * **Taille** : La sortie des paquets d'un déploiement peut inclure jusqu'à 1 000 fichiers, 8 Mo par fichier, 40 Mo au total et 5 Mo compressés avec gzip. Les paquets qui chargent de grands ensembles de modules à l'exécution, comme les maps d'icônes dynamiques, peuvent dépasser la limite de fichiers. * **Rendu côté serveur** : Chaque composant doit être rendu en moins de trois secondes sur le serveur. Un composant qui échoue ou expire n'est rendu que dans le navigateur, il est donc absent du HTML de la page. * **Recherche et IA** : La recherche, l'assistant et les exports Markdown utilisent votre source MDX, et non le contenu rendu par un composant. Conservez le contenu de référence important dans le texte de votre MDX. * **Éditeur web** : L'aperçu de l'éditeur web n'affiche pas les composants de paquets. Pour ne plus utiliser de paquets, supprimez `packages` de votre fichier `docs.json` et redéployez. ## Related topics - [Référence du schéma docs.json](/docs/fr/organize/settings-reference.md) - [Intégrations](/docs/fr/organize/settings-integrations.md) - [Aperçu](/docs/fr/components/index.md) This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.