🇫🇷 French State Design System React integration 🇫🇷
This module is a wrapper/compatibility layer for @gouvfr/dsfr, the vanilla JS/CSS implementation of the DSFR.
- 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 (0/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.
- Enable CSS in JS by providing a
useTheme()hooks that exposes the correct colors options and decision for the currently enabled color scheme.
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
yarn build
npx tsc -p src/bin -w & npx tsc -p src -w
# Open another Terminal
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 testing
When you want to import assets from the
./dsfr/directory you must assume it's located in./src/dsfrbecause it's where it's going to be relative to the transpiled JS files.
This repo was bootstrapped form garronej/ts-ci have a look at the documentation of this starter for understanding the lifecycle of this repo.
