🇫🇷 French State Design System React integration 🇫🇷
Documentation website - Playground
🗣️ Le 9 décembre (ce vendredi) de 11h à 12h30, venez assister à la présentation de la librairie et poser vos questions!
👉Lien du salon ateliers BlueHats👈
This module is a wrapper/compatibility layer for @gouvfr/dsfr, the vanilla JS/CSS implementation of the DSFR.
For TypeScript and JavaScript projects.
- Fully TypeSafe, well documented API.
- Always in up to date with latest the DSFR evolutions.
Code and Types generated from
@gouvfr/dsfr/dist/dsfr.css. - Exactly the same look and feel than with @gouvfr/dsfr.
- No white flash when reloading in SSR setup.
- Perfect integration with all major React framework: Next.js, Create React App, Vue.
- All the components are implemented (2/42)
- Three shakable distribution, cherry pick the components you import. (It's not all in a big .js bundle)
- Optional integration with MUI. If you use MUI components they will be automatically adapted to look like DSFR components. See documentation.
- Enable CSS in JS by providing a
useTheme()hooks that exposes the correct colors options and decision for the currently enabled color scheme. - Opt-in i18n, built in text can be displayed in multiple languages and user can provide extra translations.
This module is a product of Etalab's Free and open source software pole. I'm working full time on this project. You can expect rapid development.
Here are instructions for contributing, if you are looking to use @codegouvfr/react-dsfr heads over to the documentation page.
git clone https://github.com/codegouvfr/react-dsfr
cd react-dsfr
yarn
# Starting storybook
yarn storybook
# You can run 'npx tsc -w -p src' on another terminal for enabling hot reloading.
# Starting test apps
yarn start-cra # For testing in in a Create React App setup
yarn start-next # For testing in a Next.js setup
yarn start-vite # For testing in a Vite setup
# Run all unit test (test/runtime):
yarn test
# Run only test/runtime/cssVariable.test.ts (for example)
npx vitest -t "Resolution of CSS variables"
# Debugging while unit testingThis repo was bootstrapped form garronej/ts-ci have a look at the documentation of this starter for understanding the lifecycle of this repo.