@dataesr/react-dsfr
Non-official React components of the official french Systeme de Design de l'Etat.
Current version is using a degraded version of @gouvfr/dsfr@1.7.0 (new components are not yet available)
Requirements
- node >= 14.18.x
- npm >= 8.15.x
- React >= 18.2.x
Installation
npm i @dataesr/react-dsfr
Generate and watch
Generate and watch dist folder containing bundles:
npm install --legacy-peer-deps
npm start
npm start
Library usage
Example page
A playground to test components
An example page is available containing all components. To launch it on your local machine, first launch watcher of the project and then:
cd example
npm install
npm start
npm install
npm start
Use Icons
We are using remixicon.
I have an icon
">import { Icon } from '@dataesr/react-dsfr';<Icon
name="ri-bubble-chart-line"
size="lg"
color="#f88"
iconPosition="right"
>
<p>I have an iconp>
Icon>
CDN link of css must be added to the of your website.
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
Use Colors
Color variables are available in style/color.css. To make a new component dark theme compatible it's recommended to use variables from scheme.css in @gouvfr/dsfr project
Some components can be colored with variables (see colorFamily props) listed below:
['green-tilleul-verveine', 'green-bourgeon', 'green-emeraude', 'green-menthe', 'green-archipel', 'blue-ecume', 'blue-cumulus', 'purple-glycine', 'pink-macaron', 'pink-tuile', 'yellow-tournesol', 'yellow-moutarde', 'orange-terre-battue', 'brown-cafe-creme', 'brown-caramel', 'brown-opera', 'beige-gris-galet']