# 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`.

```shell
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.

```jsx
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.

```jsx
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.

```jsx
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 :

```jsx
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.