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.

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.

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.

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.

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:

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.