React

Los componentes de Feitio para React: el mismo HTML que Astro, con los comportamientos conectados solos.

Instalar

El paquete @feitio/react trae los componentes; el CSS, los iconos y las ilustraciones vienen de @feitio/core.

npm install @feitio/core @feitio/react

Carga el CSS una vez, arriba de la app. Las fuentes vienen incluidas, en fonts.css, sin pedir nada a otro sitio; si ya sirves las fuentes a tu manera, sáltate ese archivo.

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

Usar

Cada componente tiene el nombre y las props del componente de Astro, con los nombres de React (className, htmlFor). Lo que en Astro es un slot con nombre (logo, footer, do, dont) aquí es una prop.

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

<Stack gap={5}>
  <Field label="Nombre del recordatorio" for="nome" hint="Aparece en la notificación">
    <TextInput id="nome" describedBy="nome-hint" />
  </Field>
  <Inline gap={2}>
    <Button variant="primary" type="submit">Guardar recordatorio</Button>
    <Button>Cancelar</Button>
  </Inline>
</Stack>

Comportamientos

Los que tienen comportamiento lo conectan solos al montarse: Menu, Notice, Dialog, Switch, SegmentedControl, TimeInput, FilterField, ScrollFade, BackToTop y AppShell. No hay nada que llamar.

• Controles no controlados. value, checked y on dicen cómo empiezan; onChange cuenta lo que cambió.
• Un aviso desde el código: useNotices() devuelve show y close, para el elemento al que apunta la ref del Notice.
• El StatusOverlay sigue el estado: cambia state y label, y muestra cargando, listo o error.
• El Dialog se abre con cualquier botón que tenga data-open-dialog con su 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="Guardado" timeout={5000} hidden />
<Button onClick={() => show(saved.current)}>Guardar</Button>

Iconos

Sin decir nada, los iconos leen el sprite en /feitio/icons/sprite.svg: copia ahí @feitio/core/icons/sprite.svg. Si vive en otro lugar, dilo una vez, alrededor de la app:

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

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

El mismo HTML

El HTML de cada componente se escribe una sola vez, en Astro. React repite ese HTML, y una prueba lo garantiza: cada caso se dibuja en los dos y se compara atributo por atributo. Después, un navegador de verdad usa los comportamientos de React, con el ratón y el teclado, y comprueba que la página se hidrata sin diferencias.