6 |
7 |
8 | 
9 |
10 |
11 | 
12 |
13 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
238 | {
242 | setSrc(newValue)
243 | if (onEdit)
244 | onEdit({
245 | newValue,
246 | oldValue,
247 | depth: 1,
248 | src,
249 | indexOrName: indexOrName,
250 | parentType: null,
251 | parentPath: parentPath
252 | })
253 | if (onChange) onChange({ type: 'edit', depth: 1, src, indexOrName: indexOrName, parentType: null, parentPath: parentPath })
254 | }}
255 | deleteHandle={(indexOrName: number | string, parentPath: string[]) => {
256 | setSrc(undefined)
257 | if (onDelete)
258 | onDelete({
259 | value: src,
260 | depth: 1,
261 | src,
262 | indexOrName: indexOrName,
263 | parentType: null,
264 | parentPath: parentPath
265 | })
266 | if (onChange)
267 | onChange({
268 | depth: 1,
269 | src,
270 | indexOrName: indexOrName,
271 | parentType: null,
272 | type: 'delete',
273 | parentPath: parentPath
274 | })
275 | }}
276 | parentPath={[]}
277 | />
278 |
279 |
62 |
67 |
68 |
71 |
81 |
86 |
87 |
90 |
59 |
64 |
65 |
68 |
51 |
56 |
57 |
60 |
57 |
62 |
63 |
66 |
39 |
44 |
45 |
48 |
85 | The editor uses eval{' '}
86 |
87 | ({`
89 | . While in edit mode, you can enter
90 | {`({})`} or{' '}
91 | {`([])`},
92 | which will cause the result of eval to become a new object or array.
93 |
95 | `{}` and `[]` will be auto convert to `({})`,`([])` 96 |
97 |
98 | canary:{' '}
99 | eval ={'>'}{' '}
100 | JSON.parse
101 |
104 | This component does not perform any cloning operations, so every step of the operation is carried out on the 105 | original object. If cloning is required, please handle it yourself. 106 |
107 |When element is editable:
109 |{`Ctrl/Cmd+Click`}{' '}
112 | {`=>`} Edit Mode
113 | Enter{' '}
116 | {`=>`} Submit
117 | Esc{' '}
120 | {`=>`} Cancel
121 | JSON-like viewer for react18.
44 | 45 | 61 | 62 | ) 63 | } 64 | -------------------------------------------------------------------------------- /website/src/contents/installation.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { writeText } from '@/lib/clipboard' 4 | import CopySVG from '@/svgs/copy.svg' 5 | import CopiedSVG from '@/svgs/copied.svg' 6 | import { useState } from 'react' 7 | 8 | export default function Installation() { 9 | const [copied, setCopied] = useState(false) 10 | 11 | const copy = () => { 12 | writeText('npm i react18-json-view') 13 | setCopied(true) 14 | setTimeout(() => setCopied(false), 2000) 15 | } 16 | 17 | return ( 18 | <> 19 |
23 | npm i react18-json-view
24 |
27 |
28 |
29 | )
30 | }
31 |
--------------------------------------------------------------------------------
/website/src/contents/themes.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react'
2 | import JsonView from 'react18-json-view'
3 | import clsx from 'clsx'
4 | import { useTheme } from '@/hooks/useTheme'
5 | import { writeText } from '@/lib/clipboard'
6 | import CopySVG from '@/svgs/copy.svg'
7 | import CopiedSVG from '@/svgs/copied.svg'
8 | import '@/lib/hljs'
9 | import hljs from 'highlight.js/lib/core'
10 | import { useMemo } from 'react'
11 |
12 | const cssText = `.json-view {
13 | color: #4d4d4d;
14 | --json-property: #009033;
15 | --json-index: #676dff;
16 | --json-number: #676dff;
17 | --json-string: #b2762e;
18 | --json-boolean: #dc155e;
19 | --json-null: #dc155e;
20 | }`
21 |
22 | type Theme = 'default' | 'a11y' | 'github' | 'vscode' | 'atom' | 'winter-is-coming'
23 | const themes: Theme[] = ['default', 'a11y', 'github', 'vscode', 'atom', 'winter-is-coming']
24 | const bgColors: Record105 | Recommend backgroundColor: {currentBgColor} 106 |107 | 108 |
Below are the default theme variables that you can easily customize to fit your needs.
148 |