fix: support indent width (#32)

Author: himself65

src/components/DataTypes/Object.tsx

@@ -223,12 +223,13 @@ export const ObjectType: React.FC<DataItemProps<object>> = (props) => {
     groupArraysAfterLength,
     displayLength,
     keyColor])
+  const indentWidth = useJsonViewerStore(store => store.indentWidth)
   return (
     <Box
       className='data-object'
       sx={{
         display: props.inspect ? 'block' : 'inline-block',
-        pl: props.inspect ? 2 : 0,
+        pl: props.inspect ? indentWidth : 0,
         color: keyColor
       }}
     >

src/index.tsx

@@ -40,20 +40,12 @@ const JsonViewerInner: React.FC<JsonViewerProps> = (props) => {
     setIfNotUndefined('value', props.value)
   }, [props.value, setIfNotUndefined])
   useEffect(() => {
-    // setIfNotUndefined('indentWidth', props.indentWidth)
+    setIfNotUndefined('indentWidth', props.indentWidth)
     setIfNotUndefined('onChange', props.onChange)
     setIfNotUndefined('groupArraysAfterLength', props.groupArraysAfterLength)
     setIfNotUndefined('keyRenderer', props.keyRenderer)
     setIfNotUndefined('maxDisplayLength', props.maxDisplayLength)
-  }, [
-    api,
-    props.groupArraysAfterLength,
-    props.keyRenderer,
-    props.onChange,
-    props.value,
-    props.maxDisplayLength,
-    setIfNotUndefined
-  ])
+  }, [api, props.groupArraysAfterLength, props.keyRenderer, props.onChange, props.value, props.maxDisplayLength, setIfNotUndefined, props.indentWidth])
 
   useEffect(() => {
     if (props.theme === 'light') {

src/stores/JsonViewerStore.ts

@@ -14,6 +14,7 @@ DefaultKeyRenderer.when = () => false
 export type JsonViewerState<T = unknown> = {
   inspectCache: Record<string, boolean>
   hoverPath: { path: Path; nestedIndex?: number } | null
+  indentWidth: number
   groupArraysAfterLength: number
   maxDisplayLength: number
   defaultInspectDepth: number
@@ -38,6 +39,7 @@ export const createJsonViewerStore = <T = unknown>(props: JsonViewerProps<T>) =>
       {
         inspectCache: {},
         hoverPath: null,
+        indentWidth: props.indentWidth ?? 2,
         groupArraysAfterLength: props.groupArraysAfterLength ?? 100,
         maxDisplayLength: props.maxDisplayLength ?? 30,
         rootName: 'root',

src/type.ts

@@ -36,6 +36,7 @@ export type JsonViewerProps<T = unknown> = {
   value: T
   /**
    * indent width for nested objects
+   * @default 2
    */
   indentWidth?: number
   /**