🇫🇷 French State Design System React integration 🇫🇷
Documentation website - Playground
🗣️ Replay de l'atelier de présentation de la librairie ici.
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 (14/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.
- Support routing libraries like react-router.
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.
What about @dataesr/react-dsfr?
@codegouvfr/react-dsfr is a TypeScript oriented library that puts high priority in providing a good integration with the
JavaScript ecosystem, notably Next.js.
It's has been started in October 2022, it's a much newer initiative and although it's being actively developed, as of today,
@dataesr/react-dsfr is more stable and provide a wider component coverage.
If you are working on a SPA (Create React App, Vite) @dataesr/react-dsfr is probably a more viable option at the moment.
That being said, many of @codegouvfr/react-dsfr's features can be enjoyed without migrating away from @dataesr/react-dsfr.
You can, as standalone feature:
- Enjoy the
fr-*classes autocompletion and type safety. - Use the type safe color system.
- Use the MUI theme.
- The the spacing system and breakpoints util for building responsive UI.
Here is a playground to demonstrate it.
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.