JSONViewer

Visualização interativa de JSON em árvore (packages/ui/src/components/json-viewer.tsx), com realce por tipo, detecção de URLs e datas, botões para expandir/recolher tudo e copiar o payload formatado. Em viewports estreitos a truncagem de arrays desliga-se automaticamente.

Importação

import { JsonViewer } from "@zexon/ui/components/json-viewer";

Tipos úteis: JsonValue, JsonPrimitive, JsonViewerProps.

Uso básico

1
2
3
4
5
6
7
8
9
{
'id': 'evt_7f2a',
'created_at': '2024-01-15T10:00:00.000Z'// há cerca de 2 anos,
'status': 'ok',
'url': 'https://zexon.com.br',
'meta': {...} (2 itens),
'count': 42,
'flags': {...} (1 item)
}

Raiz em array

1
2
3
4
5
[
'alpha',
'beta',
{...} (1 item)
]

Indentação colorida e nível inicial expandido

showColorIndent destaca o guia à esquerda por nível. defaultExpanded pode ser true (tudo aberto), false (só a raiz, predefinição) ou um número (profundidade máxima expandida).

1
2
3
4
5
6
7
8
9
10
11
12
{
'a': {
'b': {
'c': {...} (1 item)
}
},
'items': [
1,
2,
3
]
}

Truncagem de arrays

Com truncation.enabled (predefinição: true em desktop) listas longas mostram só os primeiros itemsPerArray valores (predefinição: 5) e um botão para carregar o restante.

1
2
3
{
'items': [...] (12 itens)
}

Duplo clique para expandir

collapseOn="doubleClick" exige duplo clique na linha do objecto ou array para alternar (clique simples não expande).

1
2
3
4
{
'a': 1,
'b': {...} (1 item)
}

Sem números de linha

{
'x': 1
}

Props

O botão Copiar JSON usa o mesmo fluxo que outros componentes (useCopyToClipboard).