Pular para o conteúdo principal

Componentes de UI prontos

Se você não quer (ou não pode) montar a própria casca visual em volta do <Designer>, o pacote também exporta os componentes prontos que ele usa por dentro (Button, Card, Input, Checkbox, ícones etc — mesmo estilo do painel de propriedades, já que eles são o que o painel de propriedades usa) e um PdfPreviewModal completo:

import { Button, Card, CardHeader, CardTitle, Badge, Input, ColorInput, Textarea, Select } from "json-pdf-designer";
import "json-pdf-designer/theme.css";

<Card>
  <CardHeader>
    <CardTitle>Fontes de dados</CardTitle>
    <Button variant="ghost" size="icon"><IconX /></Button>
  </CardHeader>
  <Input label="Nome" value={name} onChange={(e) => setName(e.target.value)} />
</Card>

PdfPreviewModal​

Um modal completo em volta do <PdfPreview> — escala que ajusta ao container (recalculada no resize da janela), layout rolável de múltiplas páginas alinhado ao topo, botões de baixar e fechar.

Vem do entry point json-pdf-designer/preview, não do principal, porque ele (e o PdfPreview) é a única parte do pacote que usa pdf.js — peer dependency opcional, então instale antes:

npm install pdfjs-dist
import { PdfPreviewModal } from "json-pdf-designer/preview";

{previewBytes && (
  <PdfPreviewModal
    bytes={previewBytes}
    page={template.page}
    onClose={() => setPreviewBytes(null)}
  />
)}

O mesmo entry point exporta o PdfPreview (o renderizador em canvas puro, se você quiser o próprio modal) e o configurePdfWorker (self-host do worker do pdf.js em vez do CDN padrão). É só isso — o preview é a única coisa pra que o pdf.js é usado, então não instalar o pdfjs-dist não custa nenhum outro recurso.

Nada disso é obrigatório​

O exemplo custom-ui monta a casca inteira com CSS próprio, sem importar nenhum desses componentes, pra provar que o <Designer> funciona dos dois jeitos. O exemplo headless-designer vai um passo além e nem usa o <Designer>.

Estilizando eles​

A aparência vem do theme.css; sem esse import eles saem pelados e você estiliza as classes .jpd-* do zero. Todos aceitam className/style/...rest, e os que renderizam mais de um elemento expõem os de dentro por parts, por papel — veja Customizando os componentes, que também cobre pôr o seu Button dentro do editor, e não só em volta dele.