A JSON viewer, based on react18-json-view.
JsonViewer
import { JsonViewer } from '@yuntijs/ui';A JSON viewer, based on react18-json-view.
import { JsonViewer } from '@yuntijs/ui';A JSON viewer, based on react18-json-view.
import { JsonViewer } from '@yuntijs/ui';
export default () => {
return (
<JsonViewer
src={{
minRows: 3,
string: 'string',
number: 123456,
boolean: false,
obj: {
k1: 123,
k2: '123',
k3: false,
nested: {
k4: 'nested',
},
},
arr: ['string', 123456, false, null],
}}
/>
);
};| Name | Description | Type | Default |
|---|---|---|---|
| variant | The variant of the code block | "outlined"|"borderless"|"filled" | "filled" |
| fullFeatured | -- | boolean | -- |
| title | Only workded when fullFeatured=true | string | -- |
| icon | Only workded when fullFeatured=true | ReactNode | -- |
| contentStyle | The style of the json content | {} | -- |
| classNames | -- | {header?:string;content?:string} | -- |
| src | -- | any | (required) |
| collapseStringsAfterLength | -- | number | -- |
| collapseStringMode | -- | "address"|"directly"|"word" | -- |
| customizeCollapseStringUI | -- | string|(str_show:string,truncated:boolean)=>any | -- |
| collapseObjectsAfterLength | -- | number | -- |
| collapsed | -- | number|(params:{ node: any[] | Record<string, any>; indexOrName: string | number | undefined; depth: number; size: number; })=>void|boolean|boolean | -- |
| onCollapse | -- | (params:{ isCollapsing: boolean; node: any[] | Record<string, any>; indexOrName: string | number | undefined; depth: number; })=>void | -- |
| enableClipboard | -- | boolean | -- |
| editable | -- | {add?:boolean;edit?:boolean;delete?:boolean}|boolean | -- |
| onEdit | -- | (params:{ newValue: any; oldValue: any; depth: number; src: any; indexOrName: string | number; parentType: "object" | "array" | null; parentPath: string[]; })=>void | -- |
| onDelete | -- | (params:{ value: any; indexOrName: string | number; depth: number; src: any; parentType: "object" | "array" | null; parentPath: string[]; })=>void | -- |
| onAdd | -- | (params:{ indexOrName: string | number; depth: number; src: any; parentType: "object" | "array"; parentPath: string[]; })=>void | -- |
| onChange | -- | (params:{ indexOrName: string | number; depth: number; src: any; parentType: "object" | "array" | null; type: "add" | "edit" | "delete"; parentPath: string[]; })=>void | -- |
| customizeNode | -- | (params:{ node: any; indexOrName: string | number | undefined; depth: number; })=>ReactElement|FC<__type>|CustomizeOptions|Component<__type___type> | -- |
| customizeCopy | -- | (node:any,nodeMeta?:import("/node_modules/react18-json-view/dist/types").NodeMeta)=>any | -- |
| dark | -- | boolean | -- |
| theme | -- | "default"|"a11y"|"github"|"vscode"|"atom"|"winter-is-coming" | -- |
| displaySize | -- | number|collapsed|expanded|boolean | -- |
| displayArrayIndex | -- | boolean | -- |
| style | -- | {} | -- |
| className | -- | string | -- |
| matchesURL | -- | boolean | -- |
| urlRegExp | -- | {exec:(string:string)=>|Array<T>;test:(string:string)=>boolean;source:string;global:boolean;ignoreCase:boolean;multiline:boolean;lastIndex:number;compile:()=>any;flags:string;sticky:boolean;unicode:boolean;dotAll:boolean;__@match@15752:(string:string)=>|Array<T>;__@replace@15754:(string:string,replaceValue:string)=>string|(string:string,replacer:(substring: string, ...args: any[]) => string)=>string;__@search@15757:(string:string)=>number;__@split@15759:(string:string,limit?:number)=>string[];__@matchAll@15761:(str:string)=>{__@iterator@1032:unknown;next:(args:[] | [TNext])=>IteratorYieldResult<T>|IteratorReturnResult<TReturn>;return?:(value?:TReturn)=>IteratorYieldResult<T>|IteratorReturnResult<TReturn>;throw?:(e?:any)=>IteratorYieldResult<T>|IteratorReturnResult<TReturn>}} | -- |
| ignoreLargeArray | -- | boolean | -- |
| CopyComponent | -- | FC<__type>|Component<__type___type> | -- |
| CopiedComponent | -- | FC<__type>|Component<__type___type> | -- |
| EditComponent | -- | FC<__type>|Component<__type___type> | -- |
| CancelComponent | -- | FC<__type>|Component<__type___type> | -- |
| DoneComponent | -- | FC<__type>|Component<__type___type> | -- |
| CustomOperation | -- | FC<__type>|Component<__type___type> | -- |
{minRows: 3string: "string"number: 123456boolean: falseobj: {k1: 123k2: "123"k3: falsenested: {}1 Items}arr: ["string"123456falsenull]}