React18 JSON View

React function component for displaying javascript arrays and JSON objects. Supports all JS types.

Website, Storybook,Online

Installation

npm i react18-json-view

npm i react18-json-view@canary

Usage

import JsonView from 'react18-json-view'
import 'react18-json-view/src/style.css'
// If dark mode is needed, import `dark.css`.
// import 'react18-json-view/src/dark.css'

;<JsonView src={my_json_object} />

// If needed, you can use the internal stringify function.
// import { stringify } from 'react18-json-view'

Props

This property contains your input JSON

                                                                                                               |

| className | string | None | The CSS class name(s) to apply to the component. | | style | JSON Object | None | An object containing custom style rules to apply to the component. | | dark | boolean | false | Keep in dark mode (Don't forget to import dark.css) | | theme | default | a11y | github | vscode | atom|winter-is-coming | 'default' | Color theme | | enableClipboard | boolean | true | Whether enable clipboard feature. | | matchesURL | boolean | true | Show the link icon if value is string and matches URL regex pattern. | | urlRegExp | RegExp | /^(((ht\|f)tps?):\/\/)?([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s]{0,63}[^!@#$%^&*?.\s])?\.)+[a-z]{2,6}\/?/ | URL RegExp pattern. | | displaySize | boolean | integer | 'collapsed' | 'expanded' | false | Whether display the size of Object, Array. | | displayArrayIndex | boolean | true | Whether display the index of Array. | | collapseStringsAfterLength | integer | 99 | When an integer value is assigned, strings longer than that length will be truncated and indicated by an ellipsis. To expand or collapse the string content, simply click on the string value. | | customizeCollapseStringUI | (str_show: string, truncated: boolean) => (JSX.Element \| string) | string | - | Customize the collapse string UI. | | ignoreLargeArray | boolean | false | Prevent collapsing large array(length > 100) behavior since v0.2.7 | | collapseStringMode | 'directly' | 'word' | 'address' | 'directly' | If the word is assigned, the collapsed length will be adjusted to fully display the last word. | | collapsed | boolean | integer | function | false | When set to true(false), all nodes will be (not) collapsed by default. When using an integer value, it will collapse at a specific depth. The collapsed also can be a function. | | onCollapse | function | - | (params: { isCollapsing: boolean, node: Record<string, any> \| Array<any>, indexOrName: string \| number \| undefined, depth: number }) => void | | collapseObjectsAfterLength | integer | 99 | When an integer value is assigned, the object and array will initially collapse. | | editable | boolean | {add?: boolean, edit?: boolean, delete?: boolean} | false | When set to true, you can add, edit, or delete the property, and the actions will trigger onAdd, onEdit, or onDelete. Options is available. | | onAdd | function | - | (params: { indexOrName: string\| number, depth: number, src: any; parentType: 'object' \| 'array' }) => void | | onDelete | function | - | (params:{ value: any,indexOrName: string \| number,depth: number,src: any,parentType: 'object' \| 'array'}) => void | | onEdit | function | - | (params: { newValue: any, oldValue: any, depth: number, src: any, indexOrName: string \| number, parentType: 'object' \| 'array'}) => void | | customizeNode | ReactElement|ReactComponent|Options | - | Highly customize every node. | | customizeCopy | (node: any, nodeMeta: NodeMeta) => any | internal stringify | Customize copy behavior, only the returned non-empty string will be written to clipboard. | | CopyComponent \/ DoneComponent \/ CancelComponent | React.FC \/ React.Component <{ onClick: (event: React.MouseEvent) => void; className: string ; style: React.CSSProperties}> | - | Customize copy icon. | | CopiedComponent | React.FC \/ `React.Compon