React

Die Komponenten von Feitio für React: dasselbe HTML wie in Astro, die Verhalten verbinden sich von selbst.

Installieren

Das Paket @feitio/react bringt die Komponenten; CSS, Icons und Illustrationen kommen aus @feitio/core.

npm install @feitio/core @feitio/react

Lade das CSS einmal, oben in der App. Die Schriften kommen mit, in fonts.css, ohne etwas von einer anderen Seite zu laden; wer die Schriften schon selbst ausliefert, lässt diese Datei weg.

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

Verwenden

Jede Komponente hat den Namen und die Props der Astro-Komponente, mit den Namen von React (className, htmlFor). Was in Astro ein benannter Slot ist (logo, footer, do, dont), ist hier eine Prop.

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

<Stack gap={5}>
  <Field label="Name der Erinnerung" for="nome" hint="Erscheint in der Benachrichtigung">
    <TextInput id="nome" describedBy="nome-hint" />
  </Field>
  <Inline gap={2}>
    <Button variant="primary" type="submit">Erinnerung speichern</Button>
    <Button>Abbrechen</Button>
  </Inline>
</Stack>

Verhalten

Komponenten mit Verhalten verbinden es beim Einhängen selbst: Menu, Notice, Dialog, Switch, SegmentedControl, TimeInput, FilterField, ScrollFade, BackToTop und AppShell. Es gibt nichts aufzurufen.

• Unkontrollierte Steuerelemente. value, checked und on sagen, wie sie beginnen; onChange meldet, was sich geändert hat.
• Ein Hinweis aus dem Code: useNotices() gibt show und close zurück, für das Element, auf das die ref des Notice zeigt.
• Das StatusOverlay folgt dem Zustand: ändere state und label, und es zeigt Laden, Erfolg oder Fehler.
• Der Dialog öffnet sich über jeden Button, dessen data-open-dialog seine id trägt.

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

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

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

Icons

Ohne Angabe lesen die Icons das Sprite unter /feitio/icons/sprite.svg: kopiere @feitio/core/icons/sprite.svg dorthin. Liegt es woanders, sag es einmal, um die App herum:

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

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

Dasselbe HTML

Das HTML jeder Komponente wird nur einmal geschrieben, in Astro. React wiederholt dieses HTML, und ein Test sichert es: Jeder Fall wird in beiden gerendert und Attribut für Attribut verglichen. Danach benutzt ein echter Browser die Verhalten von React, mit Maus und Tastatur, und prüft, dass die Seite ohne Unterschied hydriert.