README.md

How to use ?

1 - Install package

npm i @apitechfr/react-dsapitech

2 - Add scripts in project's header

  <link rel="manifest" href="./node_modules/@apitechfr/react-dsapitech/favicon/manifest.webmanifest"
    crossorigin="use-credentials" />

  <link rel="stylesheet" href="./node_modules/@apitechfr/react-dsapitech/main.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ApitechFR/react-dsapitech/dsapitech.css">

3 - Import and call the components you need

import { Button } from "@apitechfr/react-dsapitech/Button";
//...
<Button>I'm a great button !</Button>

Modifications spécifiques DSApitech

Hooks

Les hooks utiles pour les exigeances Apitech sont créés dans le fichier dsapitech_hooks.

• useFrTheme : Obtenir le theme en cours

  import { Button } from "@apitechfr/react-dsapitech/Button";
  //...
  const theme = useFrTheme(); // "light" ou "dark"

Header

• mainLogoUrl : Url du logo pour le thème light
• mainLogoURLDark : Url du logo pour le thème dark

Footer

• mainLogoUrl : Url du logo pour le thème light
• mainLogoURLDark : Url du logo pour le thème dark
• defaultApitechCustomTexts : Dictionnaire des textes du footer. Contient 4 clés : accessibility, intellectualProperty, websiteMap, terms.

apitechHeaderFooterDisplayItem

Cette nouvelle fonction permet de personnaliser les textes du composant headerFooterDisplayItem. Elle s'utilise à la place de headerFooterDisplayItem, comme ceci :

<Footer
        // other Footer props...
        bottomItems={[
          apitechHeaderFooterDisplayItem({
            "display settings": "Paramètres d'affichage",
            "close": "Fermer",
            "pick a theme": `Choisissez un thème pour personnaliser l'apparence du site.`,
            "light theme": `Thème clair`,
            "dark theme": `Thème sombre`,
            "system theme": `Système`,
            "system theme hint": `Utilise les paramètres système.`
          })
        ]}
      />

Cette fonction permet de personnaliser les textes du bouton des paramètres d'affichage, ainsi que les textes de la modal associée.