# React

Os componentes do Feitio para React: o mesmo HTML do Astro, com os comportamentos ligados sozinhos.

## Instalar

O pacote `@feitio/react` traz os componentes; o CSS, os ícones e as ilustrações vêm do `@feitio/core`.

```shell
npm install @feitio/core @feitio/react
```

Carregue o CSS uma vez, no topo do app. As fontes vêm junto, no `fonts.css`, sem pedir nada a outro site; quem já serve as fontes do seu jeito pula esse arquivo.

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

## Usar

Cada componente tem o nome e as props do componente Astro, com os nomes do React (`className`, `htmlFor`). O que no Astro é um slot com nome (`logo`, `footer`, `do`, `dont`) aqui é uma prop.

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

<Stack gap={5}>
  <Field label="Nome do lembrete" for="nome" hint="Aparece na notificação">
    <TextInput id="nome" describedBy="nome-hint" />
  </Field>
  <Inline gap={2}>
    <Button variant="primary" type="submit">Salvar lembrete</Button>
    <Button>Cancelar</Button>
  </Inline>
</Stack>
```

## Comportamentos

Quem tem comportamento liga sozinho quando monta: Menu, Notice, Dialog, Switch, SegmentedControl, TimeInput, FilterField, ScrollFade, BackToTop e AppShell. Não há nada para chamar.

-   **Controles não controlados.** `value`, `checked` e `on` dizem como começam; `onChange` conta o que mudou.
-   **Um aviso pelo código:** `useNotices()` devolve `show` e `close`, para o elemento que a `ref` do Notice aponta.
-   **O StatusOverlay segue o estado:** mude `state` e `label`, e ele mostra carregando, certo ou erro.
-   **O Dialog abre** com qualquer botão que tenha `data-open-dialog` com o id dele.

```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="Salvo" timeout={5000} hidden />
<Button onClick={() => show(saved.current)}>Salvar</Button>
```

## Ícones

Sem dizer nada, os ícones leem o sprite em `/feitio/icons/sprite.svg`: copie o `@feitio/core/icons/sprite.svg` para lá. Se ele mora em outro lugar, diga uma vez, em volta do app:

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

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

## O mesmo HTML

O HTML de cada componente é escrito uma vez só, no Astro. O React repete esse HTML, e um teste garante: cada caso é desenhado nos dois e comparado atributo por atributo. Depois, um navegador de verdade usa os comportamentos do React, com o mouse e o teclado, e confere que a página hidrata sem diferença.