React

Les composants de Feitio pour React : le même HTML qu’Astro, avec les comportements branchés tout seuls.

Installer

Le paquet @feitio/react apporte les composants ; le CSS, les icônes et les illustrations viennent de @feitio/core.

npm install @feitio/core @feitio/react

Chargez le CSS une fois, en haut de l’app. Les polices sont incluses, dans fonts.css, sans rien demander à un autre site ; si vous servez déjà les polices à votre façon, ignorez ce fichier.

import '@feitio/core/css/fonts.css';
import '@feitio/core/css/feitio.css';

Utiliser

Chaque composant a le nom et les props du composant Astro, avec les noms de React (className, htmlFor). Ce qui est un slot nommé dans Astro (logo, footer, do, dont) est ici une prop.

import { Button, Field, Inline, Stack, TextInput } from '@feitio/react';

<Stack gap={5}>
  <Field label="Nom du rappel" for="nome" hint="Apparaît dans la notification">
    <TextInput id="nome" describedBy="nome-hint" />
  </Field>
  <Inline gap={2}>
    <Button variant="primary" type="submit">Enregistrer le rappel</Button>
    <Button>Annuler</Button>
  </Inline>
</Stack>

Comportements

Ceux qui ont un comportement le branchent eux-mêmes au montage : Menu, Notice, Dialog, Switch, SegmentedControl, TimeInput, FilterField, ScrollFade, BackToTop et AppShell. Il n’y a rien à appeler.

• Des contrôles non contrôlés. value, checked et on disent comment ils commencent ; onChange dit ce qui a changé.
• Un avis depuis le code : useNotices() renvoie show et close, pour l’élément que vise la ref du Notice.
• Le StatusOverlay suit l’état : changez state et label, et il montre le chargement, la réussite ou l’erreur.
• Le Dialog s’ouvre depuis tout bouton dont data-open-dialog vaut son id.

import { useRef } from 'react';
import { Button, Notice, useNotices } from '@feitio/react';

const saved = useRef(null);
const { show } = useNotices();

<Notice ref={saved} status="ok" title="Enregistré" timeout={5000} hidden />
<Button onClick={() => show(saved.current)}>Enregistrer</Button>

Icônes

Sans rien dire, les icônes lisent le sprite à /feitio/icons/sprite.svg : copiez-y @feitio/core/icons/sprite.svg. S’il vit ailleurs, dites-le une fois, autour de l’app :

import { FeitioProvider } from '@feitio/react';

<FeitioProvider sprite="/assets/sprite.svg">
  <App />
</FeitioProvider>

Le même HTML

Le HTML de chaque composant n’est écrit qu’une fois, dans Astro. React répète ce HTML, et un test le garantit : chaque cas est rendu dans les deux et comparé attribut par attribut. Ensuite, un vrai navigateur utilise les comportements de React, à la souris et au clavier, et vérifie que la page s’hydrate sans différence.