React18 JSON View

React function component for displaying javascript arrays and JSON objects.

Storybook

Installation

npm install react18-json-view --save

Usage

import JsonView from 'react18-json-view'
import 'react18-json-view/src/style.css'

<JsonView src={my_json_object} />

Props

Name|Type|Default|Description |:---|:---|:---|:--- src|JSON Object|None|This property contains your input JSON collapseStringsAfterLength|integer|99|When an integer value is assigned, strings will be cut off at that length. Collapsed strings are inserted by an ellipsis. String content can be expanded and collapsed by clicking on the string value. collapseObjectsAfterLength|integer|20|When an integer value is assigned, the object and array will be collapsed initially. enableClipboard|boolean|true|When prop is not false, the user can copy objects and arrays to clipboard by clicking on the clipboard icon.

Why

react-json-view does not support React 18.

Todo

• [x] copy (enableClipboard)
• [ ] collapse at a particular depth (collapsed)
• [x] css

Custom styles

Here are all the style codes, you can freely change color variables, such as --json-property, or others.

.json-view {
	--json-property: #009033;
	--json-index: #676dff;
	--json-number: #676dff;
	--json-string: #b2762e;
	--json-boolean: #dc155e;
	--json-null: #dc155e;
}
.json-view .json-view--property {
	color: var(--json-property);
}
.json-view .json-view--index {
	color: var(--json-index);
}
.json-view .json-view--number {
	color: var(--json-number);
}
.json-view .json-view--string {
	color: var(--json-string);
}
.json-view .json-view--boolean {
	color: var(--json-boolean);
}
.json-view .json-view--null {
	color: var(--json-null);
}
.json-view:hover > .json-view--copy {
	display: inline-block;
}
.json-view .json-view--pair:hover > .json-view--copy {
	display: inline-block;
}
.json-view .json-view--copy {
	display: none;
	width: 1em;
	height: 1em;
	margin-left: 4px;
	vertical-align: -11%;
	cursor: pointer;
}

.json-view .jv-indent {
	padding-left: 16px;
}
.json-view .jv-chevron {
	display: inline-block;
	vertical-align: -20%;
	cursor: pointer;
	opacity: 0.4;
}
.json-view .jv-chevron:hover {
	opacity: 0.8;
}
.json-view .jv-button {
	background: transparent;
	outline: none;
	border: none;
	cursor: pointer;
}
.json-view .cursor-pointer {
	cursor: pointer;
}