<img src="https://github.com/codegouvfr/react-dsfr/releases/download/assets/dsfr-react_repo-card.png">






🇫🇷 <i>React intégration pour le <a href="https://www.systeme-de-design.gouv.fr/">System de design du gouvernement français (alias DSFR)</a></i> 🇫🇷






<a href="https://github.com/codegouvfr/react-dsfr/actions">
  <img src="https://github.com/codegouvfr/react-dsfr/actions/workflows/ci.yaml/badge.svg">
</a>
<a href="https://www.npmjs.com/package/@codegouvfr/react-dsfr">
  <img src="https://img.shields.io/npm/v/@codegouvfr/react-dsfr?logo=npm">
</a>
<a href="https://bundlephobia.com/package/@codegouvfr/react-dsfr">
  <img src="https://img.shields.io/bundlephobia/minzip/@codegouvfr/react-dsfr">
</a>
<a href="https://github.com/codegouvfr/react-dsfr/blob/main/LICENSE">
  <img src="https://img.shields.io/npm/l/@codegouvfr/react-dsfr">
</a>

Documentation des composants - guides - essai immédiat

AVERTISSEMENT : Ce système de conception est uniquement destiné à être utilisé pour les sites web officiels des services publics français.
Son objectif principal est de faciliter l'identification des sites gouvernementaux par les citoyens. Voir les conditions.

Ce module est une boîte à outils avancée qui tire parti de @gouvfr/dsfr, l'implémentation en JS/CSS vanilla du DSFR.

Bien que ce module soit écrit en TypeScript, l'utilisation de TypeScript dans votre application est optionnelle (mais recommandée car elle apporte des avantages exceptionnels à la fois pour vous et votre base de code).

• [x] API entièrement TypeSafe, bien documentée.
• [x] Toujours à jour avec les dernières évolutions du DSFR. Code et Types générés à partir de @gouvfr/dsfr/dist/dsfr.css.
• [x] Exactement le même aspect et ressenti qu'avec @gouvfr/dsfr.
• [x] Pas de flash blanc lors du rechargement dans la configuration SSR.
• [x] La plupart des composants sont prêts pour les composants serveur. Les autres sont étiquetés avec "use client";
• [x] Intégration parfaite avec tous les principaux frameworks React : Next.js (PagesDir et AppDir), Create React App, Vite.
• [x] (Presque) Tous les composants sont implémentés
• [x] Trois distributions modulables, choisissez les composants que vous importez. (Ce n'est pas tout dans un gros bundle .js)
• [x] Intégration optionnelle avec MUI. Si vous utilisez des composants MUI, ils seront automatiquement adaptés pour ressembler aux composants DSFR. Voir documentation.
• [x] Permet le CSS in JS. Documentation
• [x] i18n en option, les textes intégrés peuvent être affichés en plusieurs langues et l'utilisateur peut fournir des traductions supplémentaires.
• [x] Support des bibliothèques de routage comme react-router.

💡 Besoin de pages de connexion et d'inscription prêtes à l'emploi et conformes au DSFR ? Consultez keycloak-theme-dsfr.

🚀 Commencez ici 🚀

Gouvernance

Ce module est un produit du pôle Logiciel libre et open source d'Etalab.

Ce projet est co-maintenu par des fonctionnaires de diverses administrations françaises :

• Joseph Garrone - Insee
• Julien Bouquillon - DNUM des ministères sociaux
• Dylan DECRULLE - Insee
• Enguerran Weiss - Plateforme de l'Inclusion

Développement

git clone https://github.com/codegouvfr/react-dsfr
cd react-dsfr
yarn

# Démarrer storybook
yarn storybook

# Démarrer les applications de test
yarn start-cra  # Pour tester dans une configuration Create React App
yarn start-vite # Pour tester dans une configuration Vite
yarn start-next-pagesdir # Pour tester dans une configuration Next.js 13 PagesDir (la configuration par défaut)
yarn start-next-appdir # Pour tester dans une configuration Next.js 13 AppDir

# Exécuter tous les tests unitaires (test/runtime):
yarn test
# Exécuter uniquement test/runtime/cssVariable.test.ts (par exemple)
npx vitest -t "Resolution of CSS variables"

Vous voulez contribuer ?

Merci ! Voir le guide de contribution.

Comment publier une nouvelle version sur NPM, comment sortir une version bêta

Ce dépôt a été initialisé à partir de garronej/ts-ci, consultez la documentation de ce starter pour comprendre le cycle de vie de ce dépôt.

Cas d'utilisation

Quelques projets qui utilisent @codegouvfr/react-dsfr.

• https://adresse.data.gouv.fr
• https://cartes.gouv.fr
• https://code.gouv.fr/sill
• https://diagoriente.beta.gouv.fr
• https://egapro.travail.gouv.fr
• https://github.com/BaseAdresseNationale/bal-admin
• https://github.com/DISIC/monfranceconnect
• https://github.com/EIG6-ArtificIA/predictia_front
• https://github.com/EIG6-Geocommuns/geocommuns-core
• https://github.com/EIG6-Geocommuns/lidarviz-front
• https://github.com/inclusion-numerique/mediature
• https://github.com/InseeFr/Lunatic-DSFR
• https://github.com/SocialGouv/bpco-site
• https://immersion-facile.beta.gouv.fr
• https://maisondelautisme.gouv.fr/
• https://observatoire.numerique.gouv.fr
• https://potentiel.beta.gouv.fr
• https://refugies.info
• https://signal.conso.gouv.fr
• https://territoiresentransitions.fr
• https://www.mediateur-public.fr