This module is a wrapper/compatibility layer for @gouvfr/dsfr, the vanilla JS/CSS implementation of the DSFR.
- [x] 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. - [x] Exactly the same look and feel than with @gouvfr/dsfr.
- [x] No white flash when reloading in SSR setup.
- [x] No flash of unstyled text.
- [x] Perfect integration with all major React framework: Next.js, Create React App, Vue.
- [ ] All the components are implemented (0/42)
- [x] 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.
Development
Here are instructions for contributing, if you are looking to use dsfr-react heads over to the documentation page.
yarn
yarn build
npx tsc -w
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 setupWhen 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.
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.