@codegouvfr/react-dsfr

🇫🇷 French State Design System React component library 🇫🇷

Documentation

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. 🚀

Get started

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/dsfr because it's where it's going to be relative to the transpiled JS files.

How to publish a new version on NPM, how to release a beta version

This repo was bootstrapped form garronej/ts-ci have a look at the documentation of this starter for understanding the lifecycle of this repo.