Skip to content

Commit e22f52c

Browse files
jaywcjlovejaywcjlove
committed
feat: add quotes props.
1 parent 77ac14c commit e22f52c

File tree

5 files changed

+63
-9
lines changed

5 files changed

+63
-9
lines changed

‎core/README.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ A React component for displaying and editing javascript arrays and JSON objects.
2222
📚 Use Typescript to write, better code hints.
2323
🎨 Support theme customization & [`online editing`](https://uiwjs.github.io/react-json-view/#online-editing-theme) theme
2424
🌒 Support dark/light mode
25+
📦 Zero dependencies
2526

2627
## Quick Start
2728

@@ -243,6 +244,7 @@ export default function Demo() {
243244
<JsonView
244245
value={object}
245246
keyName="root"
247+
quotes=""
246248
displayObjectSize={false}
247249
displayDataTypes={false}
248250
style={{
@@ -392,6 +394,8 @@ export interface JsonViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttr
392394
keyName?: string | number;
393395
/** The user can copy objects and arrays to clipboard by clicking on the clipboard icon. @default true */
394396
enableClipboard?: boolean;
397+
/** Display for quotes in object-key @default " */
398+
quotes?: "'" | '"' | '';
395399
/** Redefine interface elements to re-render. */
396400
components?: {
397401
braces?: MetaProps['render'];
@@ -405,6 +409,22 @@ declare const JsonView: React.ForwardRefExoticComponent<Omit<JsonViewProps<objec
405409
export default JsonView;
406410
```
407411

412+
## Size and dependencies
413+
414+
Here is the size benchmark (using [bundlephobia.com](https://bundlephobia.com)) against similar React libraries (found by https://www.npmjs.com/search?q=react%20json&ranking=popularity):
415+
416+
| Library | Bundle size | Bundle size (gzip) | Deps | Last commit |
417+
| ------- | ------- | ------- | ------- | ------- |
418+
| **@uiw/react-json-view** | [![](https://img.shields.io/bundlephobia/min/@uiw/react-json-view?color=6ead0a&label=)](https://bundlephobia.com/result?p=@uiw/react-json-view) | [![](https://img.shields.io/bundlephobia/minzip/@uiw/react-json-view?color=6ead0a&label=)](https://bundlephobia.com/result?p=@uiw/react-json-view) | [![](https://badgen.net/bundlephobia/dependency-count/%40uiw%2Freact-json-view?color=6ead0a&label=)](https://bundlephobia.com/result?p=@uiw/react-json-view) | [![GitHub last commit](https://img.shields.io/github/last-commit/uiwjs/react-json-view?style=flat&label=last)](https://github.com/uiwjs/react-json-view/commits) |
419+
| react-json-view-lite | [![](https://img.shields.io/bundlephobia/min/react-json-view-lite?color=red&label=)](https://bundlephobia.com/result?p=react-json-view-lite) | [![](https://img.shields.io/bundlephobia/minzip/react-json-view-lite?color=red&label=)](https://bundlephobia.com/result?p=react-json-view-lite) | [![](https://badgen.net/bundlephobia/dependency-count/react-json-view-lite?color=red&label=)](https://bundlephobia.com/result?p=react-json-view-lite) | [![GitHub last commit](https://img.shields.io/github/last-commit/AnyRoad/react-json-view-lite?style=flat&label=last)](https://github.com/AnyRoad/react-json-view-lite/commits) |
420+
| react-json-pretty | [![](https://img.shields.io/bundlephobia/min/react-json-pretty?color=red&label=)](https://bundlephobia.com/result?p=react-json-pretty) | [![](https://img.shields.io/bundlephobia/minzip/react-json-pretty?color=red&label=)](https://bundlephobia.com/result?p=react-json-pretty) | [![](https://badgen.net/bundlephobia/dependency-count/react-json-pretty?color=red&label=)](https://bundlephobia.com/result?p=react-json-pretty) | [![GitHub last commit](https://img.shields.io/github/last-commit/chenckang/react-json-pretty?style=flat&label=last)](https://github.com/chenckang/react-json-pretty/commits) |
421+
| react-json-inspector | [![](https://img.shields.io/bundlephobia/min/react-json-inspector?color=red&label=)](https://bundlephobia.com/result?p=react-json-inspector) | [![](https://img.shields.io/bundlephobia/minzip/react-json-inspector?color=red&label=)](https://bundlephobia.com/result?p=react-json-inspector) | [![](https://badgen.net/bundlephobia/dependency-count/react-json-inspector?color=red&label=)](https://bundlephobia.com/result?p=react-json-inspector) | [![GitHub last commit](https://img.shields.io/github/last-commit/Lapple/react-json-inspector?style=flat&label=last)](https://github.com/Lapple/react-json-inspector/commits) |
422+
| react-json-tree | [![](https://img.shields.io/bundlephobia/min/react-json-tree?color=red&label=)](https://bundlephobia.com/result?p=react-json-tree) | [![](https://img.shields.io/bundlephobia/minzip/react-json-tree?color=red&label=)](https://bundlephobia.com/result?p=react-json-tree) | [![](https://badgen.net/bundlephobia/dependency-count/react-json-tree?color=red&label=)](https://bundlephobia.com/result?p=react-json-tree) | [![GitHub last commit](https://img.shields.io/github/last-commit/reduxjs/redux-devtools?style=flat&label=last)](https://github.com/reduxjs/redux-devtools/commits) |
423+
| react-json-view | [![](https://img.shields.io/bundlephobia/min/react-json-view?color=red&label=)](https://bundlephobia.com/result?p=react-json-view) | [![](https://img.shields.io/bundlephobia/minzip/react-json-view?color=red&label=)](https://bundlephobia.com/result?p=react-json-view) | [![](https://badgen.net/bundlephobia/dependency-count/react-json-view?color=red&label=)](https://bundlephobia.com/result?p=react-json-view) | [![GitHub last commit](https://img.shields.io/github/last-commit/mac-s-g/react-json-view?style=flat&label=last)](https://github.com/mac-s-g/react-json-view/commits) |
424+
| react-json-tree-viewer | [![](https://img.shields.io/bundlephobia/min/react-json-tree-viewer?color=red&label=)](https://bundlephobia.com/result?p=react-json-tree-viewer) | [![](https://img.shields.io/bundlephobia/minzip/react-json-tree-viewer?color=red&label=)](https://bundlephobia.com/result?p=react-json-tree-viewer) | [![](https://badgen.net/bundlephobia/dependency-count/react-json-tree-viewer?color=red&label=)](https://bundlephobia.com/result?p=react-json-tree-viewer) | [![GitHub last commit](https://img.shields.io/github/last-commit/nsisodiya/react-json-viewer?style=flat&label=last)](https://github.com/nsisodiya/react-json-viewer/commits) |
425+
| react-domify | [![](https://img.shields.io/bundlephobia/min/react-domify?color=red&label=)](https://bundlephobia.com/result?p=react-domify) | [![](https://img.shields.io/bundlephobia/minzip/react-domify?color=red&label=)](https://bundlephobia.com/result?p=react-domify) | [![](https://badgen.net/bundlephobia/dependency-count/react-domify?color=red&label=)](https://bundlephobia.com/result?p=react-domify) | [![GitHub last commit](https://img.shields.io/github/last-commit/JedWatson/react-domify?style=flat&label=last)](https://github.com/JedWatson/react-domify/commits) |
426+
| react18-json-view | [![](https://img.shields.io/bundlephobia/min/react18-json-view?color=red&label=)](https://bundlephobia.com/result?p=react18-json-view) | [![](https://img.shields.io/bundlephobia/minzip/react18-json-view?color=red&label=)](https://bundlephobia.com/result?p=react18-json-view) | [![](https://badgen.net/bundlephobia/dependency-count/react18-json-view?color=red&label=)](https://bundlephobia.com/result?p=react18-json-view) | [![GitHub last commit](https://img.shields.io/github/last-commit/YYsuni/react18-json-view?style=flat&label=last)](https://github.com/YYsuni/react18-json-view/commits) |
427+
408428
## Development
409429

410430
Runs the project in development mode.

‎core/package.json‎

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -53,13 +53,25 @@
5353
"esm"
5454
],
5555
"keywords": [
56-
"monaco-editor",
57-
"monaco-nginx",
58-
"nginx",
59-
"monaco",
60-
"editor",
61-
"editor-nginx",
62-
"monaco-editor-nginx"
56+
"array-viewer",
57+
"component",
58+
"interactive",
59+
"interactive-json",
60+
"json",
61+
"json-component",
62+
"json-display",
63+
"json-tree",
64+
"json-view",
65+
"json-viewer",
66+
"json-inspector",
67+
"json-tree",
68+
"react",
69+
"react-component",
70+
"react-json",
71+
"theme",
72+
"tree",
73+
"tree-view",
74+
"treeview"
6375
],
6476
"devDependencies": {
6577
"react": "^18.2.0",

‎core/src/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ export interface JsonViewProps<T>
1919
keyName?: string | number;
2020
/** The user can copy objects and arrays to clipboard by clicking on the clipboard icon. @default true */
2121
enableClipboard?: boolean;
22+
/** Display for quotes in object-key @default " */
23+
quotes?: "'" | '"' | '';
2224
/** Redefine interface elements to re-render. */
2325
components?: {
2426
braces?: MetaProps['render'];

‎core/src/node.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ export const Ellipsis: FC<PropsWithChildren<EllipsisProps>> = ({ style, render,
4646
};
4747
export interface SemicolonProps extends LabelProps {
4848
show?: boolean;
49+
quotes?: JsonViewProps<object>['quotes'];
4950
value?: object;
5051
render?: (props: Omit<SemicolonProps, 'show'> & {}) => JSX.Element;
5152
}
@@ -56,9 +57,10 @@ export const Semicolon: FC<PropsWithChildren<SemicolonProps>> = ({
5657
value,
5758
className = 'w-rjv-object-key',
5859
show,
60+
quotes,
5961
...props
6062
}) => {
61-
const content = show ? `"${children}"` : children;
63+
const content = show ? `${quotes}${children}${quotes}` : children;
6264
if (render) return render({ className, ...props, value, style: { color }, children: content });
6365
return (
6466
<Label className={className} color={color} {...props}>
@@ -90,6 +92,7 @@ export function RooNode<T extends object>(props: RooNodeProps<T>) {
9092
enableClipboard = true,
9193
indentWidth = 15,
9294
keyid = 'root',
95+
quotes = '"',
9396
...reset
9497
} = props;
9598
const isArray = Array.isArray(value);
@@ -106,6 +109,8 @@ export function RooNode<T extends object>(props: RooNodeProps<T>) {
106109
indentWidth,
107110
displayDataTypes,
108111
displayObjectSize,
112+
enableClipboard,
113+
quotes,
109114
style: { paddingLeft: indentWidth },
110115
};
111116
const valueViewProps = {
@@ -133,6 +138,7 @@ export function RooNode<T extends object>(props: RooNodeProps<T>) {
133138
<Fragment>
134139
<Semicolon
135140
value={value}
141+
quotes={quotes}
136142
render={components.objectKey}
137143
color={typeof keyName === 'number' ? typeMap['number'].color : ''}
138144
show={typeof keyName === 'string'}
@@ -156,6 +162,7 @@ export function RooNode<T extends object>(props: RooNodeProps<T>) {
156162
const renderKey = (
157163
<Semicolon
158164
value={item}
165+
quotes={quotes}
159166
render={components.objectKey}
160167
color={typeof key === 'number' ? typeMap['number'].color : ''}
161168
show={typeof key === 'string'}

‎www/src/Example.tsx‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Fragment, useState } from 'react';
22
import { styled } from 'styled-components';
3-
import JsonView from '@uiw/react-json-view';
3+
import JsonView, { JsonViewProps } from '@uiw/react-json-view';
44
import { lightTheme } from '@uiw/react-json-view/light';
55
import { darkTheme } from '@uiw/react-json-view/dark';
66

@@ -58,13 +58,15 @@ export function Example() {
5858
const [displayDataTypes, setDisplayDataTypes] = useState(true);
5959
const [displayObjectSize, setDisplayObjectSize] = useState(true);
6060
const [clipboard, setClipboard] = useState(true);
61+
const [quotes, setQuotes] = useState<JsonViewProps<object>['quotes']>("\"");
6162
return (
6263
<Fragment>
6364
<JsonView
6465
value={example}
6566
indentWidth={indentWidth}
6667
displayObjectSize={displayObjectSize}
6768
displayDataTypes={displayDataTypes}
69+
quotes={quotes}
6870
enableClipboard={clipboard}
6971
style={theme}
7072
/>
@@ -77,6 +79,17 @@ export function Example() {
7779
<option value="dark">dark</option>
7880
</select>
7981
</Label>
82+
<Label>
83+
<span>Quotes:</span>
84+
<select
85+
value={quotes?.toString()}
86+
onChange={(evn) => setQuotes(evn.target.value as JsonViewProps<object>['quotes'])}
87+
>
88+
<option value="">enable quotes</option>
89+
<option value={`"`}>" double quotes</option>
90+
<option value={`'`}>' single quotes</option>
91+
</select>
92+
</Label>
8093
<Label>
8194
<span>Indent:</span>
8295
<input type="number" value={indentWidth} onChange={(evn) => setIndentWidth(Number(evn.target.value))} />

0 commit comments

Comments
 (0)