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

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

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

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

```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="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:

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