Add displayArrayKey Option for Rendering Array Keys in JSONViewer

README.md

@@ -59,6 +59,8 @@ import 'react18-json-view/src/style.css'
 | `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.                                                                                                                                                                   |
+| `displayArrayKey`            | `boolean`                                                                 | `true`       | Whether to display the index of `Array` or not.                                                                                                                                                |
+| `viewMode`                   | `'viewer'` \| `'json'`                                                    | `'viewer'`   | When set to json, commas are append to each line.                                                                                                                                              |
 
 ### Collapsed function
 ```ts

src/components/json-view.tsx

@@ -1,30 +1,11 @@
 import { createContext, useCallback, useState } from 'react'
 import JsonNode from './json-node'
-import type { Collapsed, CustomizeNode, DisplaySize, Editable } from '../types'
+import type { Collapsed, CustomizeNode, DisplaySize, Editable, ViewMode } from '../types'
 
-type OnEdit = (params: {
-	newValue: any
-	oldValue: any
-	depth: number
-	src: any
-	indexOrName: string | number
-	parentType: 'object' | 'array'
-}) => void
-type OnDelete = (params: {
-	value: any
-	indexOrName: string | number
-	depth: number
-	src: any
-	parentType: 'object' | 'array'
-}) => void
+type OnEdit = (params: { newValue: any; oldValue: any; depth: number; src: any; indexOrName: string | number; parentType: 'object' | 'array' }) => void
+type OnDelete = (params: { value: any; indexOrName: string | number; depth: number; src: any; parentType: 'object' | 'array' }) => void
 type OnAdd = (params: { indexOrName: string | number; depth: number; src: any; parentType: 'object' | 'array' }) => void
-type OnChange = (params: {
-	indexOrName: string | number
-	depth: number
-	src: any
-	parentType: 'object' | 'array'
-	type: 'add' | 'edit' | 'delete'
-}) => void
+type OnChange = (params: { indexOrName: string | number; depth: number; src: any; parentType: 'object' | 'array'; type: 'add' | 'edit' | 'delete' }) => void
 
 export const JsonViewContext = createContext({
 	src: undefined as any,
@@ -47,7 +28,10 @@ export const JsonViewContext = createContext({
 
 	customizeNode: undefined as CustomizeNode | undefined,
 
-	displaySize: undefined as DisplaySize
+	displaySize: undefined as DisplaySize,
+
+	displayArrayKey: true,
+	viewMode: 'viewer' as ViewMode
 })
 
 interface Props {
@@ -73,6 +57,8 @@ interface Props {
 	theme?: 'default' | 'a11y' | 'github' | 'vscode' | 'atom' | 'winter-is-coming'
 
 	displaySize?: DisplaySize
+	displayArrayKey?: boolean
+	viewMode?: ViewMode
 }
 
 export default function JsonView({
@@ -97,7 +83,10 @@ export default function JsonView({
 
 	customizeNode,
 
-	displaySize
+	displaySize,
+
+	displayArrayKey = true,
+	viewMode = 'viewer'
 }: Props) {
 	const [_, update] = useState(0)
 	const forceUpdate = useCallback(() => update(state => ++state), [])
@@ -125,10 +114,12 @@ export default function JsonView({
 
 				customizeNode,
 
-				displaySize
+				displaySize,
+
+				displayArrayKey,
+				viewMode
 			}}>
-			<code
-				className={'json-view' + (dark ? ' dark' : '') + (theme && theme !== 'default' ? ' json-view_' + theme : '')}>
+			<code className={'json-view' + (dark ? ' dark' : '') + (theme && theme !== 'default' ? ' json-view_' + theme : '')}>
 				<JsonNode node={src} depth={1} />
 			</code>
 		</JsonViewContext.Provider>

src/components/name-value.tsx

@@ -1,3 +1,5 @@
+import { useContext } from 'react'
+import { JsonViewContext } from './json-view'
 import JsonNode from './json-node'
 
 interface Props {
@@ -10,20 +12,21 @@ interface Props {
 }
 
 export default function NameValue({ indexOrName, value, depth, parent, deleteHandle, editHandle }: Props) {
+	const { displayArrayKey, viewMode } = useContext(JsonViewContext)
+	const isArray = Array.isArray(parent)
+
 	return (
 		<div className='json-view--pair'>
-			<span className={typeof indexOrName === 'number' ? 'json-view--index' : 'json-view--property'}>
-				{indexOrName}
-			</span>
-			:{' '}
-			<JsonNode
-				node={value}
-				depth={depth + 1}
-				deleteHandle={deleteHandle}
-				editHandle={editHandle}
-				parent={parent}
-				indexOrName={indexOrName}
-			/>
+			{!isArray || displayArrayKey ? (
+				<span>
+					<span className={typeof indexOrName === 'number' ? 'json-view--index' : 'json-view--property'}>{indexOrName}</span>
+					<span>: </span>
+				</span>
+			) : null}
+
+			<JsonNode node={value} depth={depth + 1} deleteHandle={deleteHandle} editHandle={editHandle} parent={parent} indexOrName={indexOrName} />
+
+			{viewMode === 'json' && <span>,</span>}
 		</div>
 	)
 }

src/stories/share.ts

@@ -56,8 +56,7 @@ export const argTypes = {
 		table: {
 			defaultValue: { summary: false }
 		},
-		description:
-			'When set to true, you can add, edit, or delete the property, and the actions will trigger onAdd, onEdit, or onDelete. Options is available.'
+		description: '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: {
 		description: `(params: { indexOrName: string | number, depth: number, src: any; parentType: 'object' | 'array' }) => void`
@@ -83,5 +82,20 @@ export const argTypes = {
 	},
 	customizeNode: {
 		description: 'Highly customize every node.'
+	},
+	displayArrayKey: {
+		control: 'boolean',
+		description: 'Sets whether to display the array key or not.',
+		table: {
+			defaultValue: { summary: true }
+		}
+	},
+	viewMode: {
+		control: 'select',
+		options: ['viewer', 'json'],
+		description: 'Sets the viewer mode to viewer or json. With json mode, commas are displayed.',
+		table: {
+			defaultValue: { summary: 'viewer' }
+		}
 	}
 }

src/types.ts

@@ -2,12 +2,7 @@ export declare type Collapsed =
 	| undefined
 	| number
 	| boolean
-	| ((params: {
-			node: Record<string, any> | Array<any>
-			indexOrName: number | string | undefined
-			depth: number
-			size: number
-	  }) => boolean | void)
+	| ((params: { node: Record<string, any> | Array<any>; indexOrName: number | string | undefined; depth: number; size: number }) => boolean | void)
 
 export type DisplaySize = undefined | number | boolean | 'collapsed' | 'expanded'
 
@@ -32,3 +27,5 @@ export declare type CustomizeNode = (params: {
 	indexOrName: number | string | undefined
 	depth: number
 }) => CustomizeOptions | React.FC | React.Component | React.ReactElement<any, any> | undefined
+
+export declare type ViewMode = 'viewer' | 'json'