JsonView
Un JSON en lecture seule, que l'on déplie.
Pour une réponse d'API, une charge utile, une configuration : les types se distinguent à la couleur, les branches profondes restent repliées, et un nœud replié dit ce qu'il contient — {…} 3 clés. À la différence de JsonEditor, rien ne s'y saisit.
Installation
bash
sia-ui add json-viewOu par le paquet, sans rien copier :
tsx
import { JsonView } from "@sia-ui/react-web";Props
| Prop | Type | Défaut | Description |
|---|---|---|---|
alertProps | Partial<Omit<AlertProps, "children">> | — | L'alerte d'un texte invalide. Son contenu est l'erreur d'analyse. |
className | string | — | |
collapsible | boolean | true | Faux : un simple bloc mis en forme, tout ouvert, sans bascule. |
copiedLabel | string | — | |
copyable | boolean | true | Vrai par défaut : un bouton copie le JSON mis en forme. |
copyButtonProps | Partial<Omit<ButtonProps, "children" | "onClick">> | — | Le bouton de copie. Son action et son libellé suivent la copie. |
copyLabel | string | — | |
defaultExpandDepth | number | 2 | Les niveaux ouverts au premier affichage. 2 par défaut. |
invalidLabel | ReactNode | — | Le titre de l'alerte quand source ne s'analyse pas. |
maxHeight | string | number | — | Au-delà, la zone défile. |
scrollAreaProps | Partial<Omit<ScrollAreaProps, "children" | "maxHeight">> | — | La zone défilante. Sa hauteur maximale passe par maxHeight. |
source | string | — | Un texte JSON, analysé ici. S'il est invalide, il s'affiche tel quel sous une alerte discrète : une réponse serveur tronquée reste lisible. Prioritaire sur value. |
value | unknown | — | Une valeur déjà analysée : objet, tableau, scalaire. |
Voir aussi
- Le composant dans le catalogue — états, variantes, et bac à sable.
- La référence complète — tous les composants.