@uiw/react-json-view 2.0.0-alpha.27 → 2.0.0-alpha.29

package/README.md

@@ -127,7 +127,6 @@ export default function Demo() {
 }
 ```
 
-
 Example of custom `vscode` theme styles: 
 
 ```tsx mdx:preview
@@ -682,6 +681,74 @@ export default function Demo() {
 
 This feature can be disabled with `highlightUpdates={false}`, and the default color can be changed with `--w-rjv-update-color`.
 
+## Do not display array index
+
+```tsx mdx:preview
+import React, { Fragment } from 'react';
+import JsonView from '@uiw/react-json-view';
+
+export default function Demo() {
+  const value = { data: ["123", 23] }
+  return (
+    <JsonView value={value} style={{ '--w-rjv-background-color': '#ffffff' }}>
+        <JsonView.Colon render={(props, { parentValue, value, keyName }) => {
+            if (Array.isArray(parentValue) && props.children == ":") {
+              return <span />
+            }
+            return <span {...props} />
+        }}/>
+        <JsonView.KeyName 
+          render={({ ...props }, { type, parentValue, value, keyName }) => {
+            if (Array.isArray(parentValue) && Number.isFinite( props.children)) {
+              return <span />
+            }
+            return <span {...props} />
+          }}
+        />
+    </JsonView>
+  )
+}
+```
+
+## Default Collapse/Expand
+
+```tsx mdx:preview
+import React from 'react';
+import JsonView from '@uiw/react-json-view';
+const object = {
+  string: 'Lorem ipsum dolor sit amet',
+  integer: 42,
+  float: 114.514,
+  object: {
+    'first-child': true,
+    'second-child': false,
+    'last-child': null,
+  },
+  nestedArray: [
+    [1, 2],
+    [3, 4],
+  ],
+}
+export default function Demo() {
+  return (
+    <JsonView
+      value={object}
+      collapsed={2}
+      shouldExpandNodeInitially={(isExpanded, { value, keys, level }) => {
+        if (keys.length > 0 && keys[0] == "object") {
+          return true
+        }
+        return isExpanded
+      }}
+      style={{
+        '--w-rjv-background-color': '#ffffff',
+      }}
+    >
+    </JsonView>
+  )
+}
+```
+
 ## Modify Icon Style
 
 Use built-in default icons.
@@ -812,17 +879,17 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
   enableClipboard?: boolean;
   /** When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. @default false */
   collapsed?: boolean | number;
+  /** Determine whether the node should be expanded on the first render, or you can use collapsed to control the level of expansion (by default, the root is expanded). */
+  shouldExpandNodeInitially?: (
+    isExpanded: boolean,
+    props: { value?: T; keys: (number | string)[]; level: number },
+  ) => boolean;
   /** Whether to highlight updates. @default true */
   highlightUpdates?: boolean;
   /** Shorten long JSON strings, Set to `0` to disable this feature @default 30 */
   shortenTextAfterLength?: number;
   /** Callback function for when a treeNode is expanded or collapsed */
-  onExpand?: (props: {
-    expand: boolean;
-    value?: T;
-    keyid: string;
-    keyName?: string | number;
-  }) => void;
+  onExpand?: (props: { expand: boolean; value?: T; keyid: string; keyName?: string | number }) => void;
   /** Fires event when you copy */
   onCopied?: (text: string, value?: T) => void;
 }

package/cjs/Container.js

@@ -63,7 +63,8 @@ var Container = exports.Container = /*#__PURE__*/(0, _react.forwardRef)(function
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_NestedClose.NestedClose, {
       expandKey: subkeyid,
       value: value,
-      level: level
+      level: level,
+      keys: keys
     })]
   }));
 });

package/cjs/comps/KeyValues.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.KeyValuesItem = exports.KeyValues = exports.KayName = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
@@ -35,9 +35,18 @@ var KeyValues = exports.KeyValues = function KeyValues(props) {
   var _useStore = (0, _store.useStore)(),
     objectSortKeys = _useStore.objectSortKeys,
     indentWidth = _useStore.indentWidth,
-    collapsed = _useStore.collapsed;
+    collapsed = _useStore.collapsed,
+    shouldExpandNodeInitially = _useStore.shouldExpandNodeInitially;
   var isMyArray = Array.isArray(value);
-  var isExpanded = (_expands$expandKey = expands[expandKey]) !== null && _expands$expandKey !== void 0 ? _expands$expandKey : typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
+  var defaultExpanded = typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
+  var isExpanded = (_expands$expandKey = expands[expandKey]) !== null && _expands$expandKey !== void 0 ? _expands$expandKey : defaultExpanded;
+  if (expands[expandKey] === undefined && shouldExpandNodeInitially && shouldExpandNodeInitially(isExpanded, {
+    value: value,
+    keys: keys,
+    level: level
+  })) {
+    return null;
+  }
   if (isExpanded) {
     return null;
   }
@@ -99,23 +108,25 @@ var KayName = exports.KayName = function KayName(props) {
     highlightUpdates: highlightUpdates,
     highlightContainer: highlightContainer
   });
+  var compProps = {
+    keyName: keyName,
+    value: value,
+    keys: keys,
+    parentValue: parentValue
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
       ref: highlightContainer,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.Quote, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.Quote, (0, _objectSpread2["default"])({
         isNumber: isNumber,
         "data-placement": "left"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_KeyName.KeyNameComp, {
-        keyName: keyName,
-        value: value,
-        keys: keys,
-        parentValue: parentValue,
+      }, compProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_KeyName.KeyNameComp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, compProps), {}, {
         children: keyName
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.Quote, {
+      })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.Quote, (0, _objectSpread2["default"])({
         isNumber: isNumber,
         "data-placement": "right"
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.Colon, {})]
+      }, compProps))]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.Colon, (0, _objectSpread2["default"])({}, compProps))]
   });
 };
 KayName.displayName = 'JVR.KayName';

package/cjs/comps/NestedClose.d.ts

@@ -2,6 +2,7 @@ interface NestedCloseProps<T extends object> {
     value?: T;
     expandKey: string;
     level: number;
+    keys?: (string | number)[];
 }
 export declare const NestedClose: {
     <T extends object>(props: NestedCloseProps<T>): import("react/jsx-runtime").JSX.Element | null;

package/cjs/comps/NestedClose.js

@@ -12,14 +12,25 @@ var NestedClose = exports.NestedClose = function NestedClose(props) {
   var _expands$expandKey;
   var value = props.value,
     expandKey = props.expandKey,
-    level = props.level;
+    level = props.level,
+    _props$keys = props.keys,
+    keys = _props$keys === void 0 ? [] : _props$keys;
   var expands = (0, _Expands.useExpandsStore)();
   var isArray = Array.isArray(value);
   var _useStore = (0, _store.useStore)(),
-    collapsed = _useStore.collapsed;
+    collapsed = _useStore.collapsed,
+    shouldExpandNodeInitially = _useStore.shouldExpandNodeInitially;
   var isMySet = value instanceof Set;
-  var isExpanded = (_expands$expandKey = expands[expandKey]) !== null && _expands$expandKey !== void 0 ? _expands$expandKey : typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
+  var defaultExpanded = typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
+  var isExpanded = (_expands$expandKey = expands[expandKey]) !== null && _expands$expandKey !== void 0 ? _expands$expandKey : defaultExpanded;
   var len = Object.keys(value).length;
+  if (expands[expandKey] === undefined && shouldExpandNodeInitially && shouldExpandNodeInitially(isExpanded, {
+    value: value,
+    keys: keys,
+    level: level
+  })) {
+    return null;
+  }
   if (isExpanded || len === 0) {
     return null;
   }

package/cjs/comps/NestedOpen.js

@@ -22,7 +22,8 @@ var NestedOpen = exports.NestedOpen = function NestedOpen(props) {
   var _expands$expandKey;
   var keyName = props.keyName,
     expandKey = props.expandKey,
-    keys = props.keys,
+    _props$keys = props.keys,
+    keys = _props$keys === void 0 ? [] : _props$keys,
     initialValue = props.initialValue,
     value = props.value,
     parentValue = props.parentValue,
@@ -31,11 +32,21 @@ var NestedOpen = exports.NestedOpen = function NestedOpen(props) {
   var dispatchExpands = (0, _Expands.useExpandsDispatch)();
   var _useStore = (0, _store.useStore)(),
     onExpand = _useStore.onExpand,
-    collapsed = _useStore.collapsed;
+    collapsed = _useStore.collapsed,
+    shouldExpandNodeInitially = _useStore.shouldExpandNodeInitially;
   var isArray = Array.isArray(value);
   var isMySet = value instanceof Set;
-  var isExpanded = (_expands$expandKey = expands[expandKey]) !== null && _expands$expandKey !== void 0 ? _expands$expandKey : typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
+  var defaultExpanded = typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
   var isObject = (0, _typeof2["default"])(value) === 'object';
+  var isExpanded = (_expands$expandKey = expands[expandKey]) !== null && _expands$expandKey !== void 0 ? _expands$expandKey : defaultExpanded;
+  var shouldExpand = shouldExpandNodeInitially && shouldExpandNodeInitially(isExpanded, {
+    value: value,
+    keys: keys,
+    level: level
+  });
+  if (expands[expandKey] === undefined && shouldExpand !== undefined) {
+    isExpanded = shouldExpand;
+  }
   var click = function click() {
     var opt = {
       expand: !isExpanded,
@@ -62,11 +73,17 @@ var NestedOpen = exports.NestedOpen = function NestedOpen(props) {
   if (showArrow) {
     reset.onClick = click;
   }
+  var compProps = {
+    keyName: keyName,
+    value: value,
+    keys: keys,
+    parentValue: parentValue
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
-    children: [showArrow && /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.Arrow, {
+    children: [showArrow && /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.Arrow, (0, _objectSpread2["default"])({
       style: arrowStyle,
       expandKey: expandKey
-    }), (keyName || typeof keyName === 'number') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_KeyValues.KayName, {
+    }, compProps)), (keyName || typeof keyName === 'number') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_KeyValues.KayName, {
       keyName: keyName
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_types.SetComp, {
       value: initialValue,
@@ -74,16 +91,16 @@ var NestedOpen = exports.NestedOpen = function NestedOpen(props) {
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_types.MapComp, {
       value: initialValue,
       keyName: keyName
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.BracketsOpen, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.BracketsOpen, (0, _objectSpread2["default"])({
       isBrackets: isArray || isMySet
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ellipsis.EllipsisComp, {
+    }, compProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ellipsis.EllipsisComp, {
       keyName: keyName,
       value: value,
       isExpanded: isExpanded
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.BracketsClose, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.BracketsClose, (0, _objectSpread2["default"])({
       isVisiable: isExpanded || !showArrow,
       isBrackets: isArray || isMySet
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CountInfo.CountInfoComp, {
+    }, compProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CountInfo.CountInfoComp, {
       value: value,
       keyName: keyName
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CountInfoExtra.CountInfoExtraComps, {

package/cjs/index.d.ts

@@ -48,6 +48,12 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
     enableClipboard?: boolean;
     /** When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. @default false */
     collapsed?: boolean | number;
+    /** Determine whether the node should be expanded on the first render, or you can use collapsed to control the level of expansion (by default, the root is expanded). */
+    shouldExpandNodeInitially?: (isExpanded: boolean, props: {
+        value?: T;
+        keys: (number | string)[];
+        level: number;
+    }) => boolean;
     /** Whether to highlight updates. @default true */
     highlightUpdates?: boolean;
     /** Shorten long JSON strings, Set to `0` to disable this feature @default 30 */

package/cjs/index.js

@@ -110,7 +110,7 @@ Object.keys(_symbol).forEach(function (key) {
     }
   });
 });
-var _excluded = ["className", "style", "value", "children", "collapsed", "indentWidth", "displayObjectSize", "shortenTextAfterLength", "highlightUpdates", "enableClipboard", "displayDataTypes", "objectSortKeys", "onExpand", "onCopied"];
+var _excluded = ["className", "style", "value", "children", "collapsed", "shouldExpandNodeInitially", "indentWidth", "displayObjectSize", "shortenTextAfterLength", "highlightUpdates", "enableClipboard", "displayDataTypes", "objectSortKeys", "onExpand", "onCopied"];
 var JsonView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _props$className = props.className,
     className = _props$className === void 0 ? '' : _props$className,
@@ -118,6 +118,7 @@ var JsonView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     value = props.value,
     children = props.children,
     collapsed = props.collapsed,
+    shouldExpandNodeInitially = props.shouldExpandNodeInitially,
     _props$indentWidth = props.indentWidth,
     indentWidth = _props$indentWidth === void 0 ? 15 : _props$indentWidth,
     _props$displayObjectS = props.displayObjectSize,
@@ -148,6 +149,7 @@ var JsonView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       value: value,
       objectSortKeys: objectSortKeys,
       indentWidth: indentWidth,
+      shouldExpandNodeInitially: shouldExpandNodeInitially,
       displayObjectSize: displayObjectSize,
       collapsed: collapsed,
       enableClipboard: enableClipboard,

package/cjs/store/Symbols.d.ts

@@ -1,8 +1,15 @@
 import { FC, PropsWithChildren, ElementType, ComponentPropsWithoutRef } from 'react';
 import { type TagType } from './Types';
+export interface SymbolsElementResult<T extends object, K = string | number> {
+    value?: T;
+    parentValue?: T;
+    keyName?: K;
+    /** Index of the parent `keyName` */
+    keys?: K[];
+}
 type SymbolsElementProps<T extends TagType = 'span'> = {
     as?: T;
-    render?: (props: SymbolsElement<T>) => React.ReactNode;
+    render?: (props: SymbolsElement<T>, result: SymbolsElementResult<object>) => React.ReactNode;
     'data-type'?: string;
 };
 export type SymbolsElement<T extends TagType = 'span'> = SymbolsElementProps<T> & ComponentPropsWithoutRef<T>;

package/cjs/store.d.ts

@@ -12,6 +12,7 @@ export interface InitialState<T extends object> {
     enableClipboard?: JsonViewProps<T>['enableClipboard'];
     highlightUpdates?: JsonViewProps<T>['highlightUpdates'];
     collapsed?: JsonViewProps<T>['collapsed'];
+    shouldExpandNodeInitially?: JsonViewProps<T>['shouldExpandNodeInitially'];
     indentWidth?: number;
 }
 export declare const initialState: InitialState<object>;

package/cjs/symbol/index.d.ts

@@ -1,9 +1,9 @@
-import { type SymbolsElement } from '../store/Symbols';
+import { type SymbolsElement, type SymbolsElementResult } from '../store/Symbols';
 import { type TagType } from '../store/Types';
 export declare const Quote: {
-    (props: {
+    <T extends object>(props: {
         isNumber?: boolean;
-    } & React.HTMLAttributes<HTMLElement>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
+    } & React.HTMLAttributes<HTMLElement> & SymbolsElementResult<T>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };
 export declare const ValueQuote: {
@@ -11,19 +11,19 @@ export declare const ValueQuote: {
     displayName: string;
 };
 export declare const Colon: {
-    (): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
+    <T extends object>(props: SymbolsElementResult<T>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const Arrow: {
-    <T extends TagType>(props: SymbolsElement<T> & {
+    <T extends TagType, K extends object>(props: SymbolsElement<T> & {
         expandKey: string;
-    }): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
+    } & SymbolsElementResult<K>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const BracketsOpen: {
-    ({ isBrackets }: {
+    <K extends object>(props: {
         isBrackets?: boolean;
-    }): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
+    } & SymbolsElementResult<K>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 type BracketsCloseProps = {
@@ -31,7 +31,7 @@ type BracketsCloseProps = {
     isVisiable?: boolean;
 };
 export declare const BracketsClose: {
-    ({ isBrackets, isVisiable }: BracketsCloseProps): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
+    <K extends object>(props: BracketsCloseProps & SymbolsElementResult<K>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };
 export {};

package/cjs/symbol/index.js

@@ -12,7 +12,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _Symbols = require("../store/Symbols");
 var _Expands = require("../store/Expands");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["isNumber"],
+var _excluded = ["isNumber", "value", "parentValue", "keyName", "keys"],
   _excluded2 = ["as", "render"],
   _excluded3 = ["as", "render"],
   _excluded4 = ["as", "render"],
@@ -26,6 +26,10 @@ var Quote = exports.Quote = function Quote(props) {
     _useSymbolsStore$Quot = _useSymbolsStore.Quote,
     Comp = _useSymbolsStore$Quot === void 0 ? {} : _useSymbolsStore$Quot;
   var isNumber = props.isNumber,
+    value = props.value,
+    parentValue = props.parentValue,
+    keyName = props.keyName,
+    keys = props.keys,
     other = (0, _objectWithoutProperties2["default"])(props, _excluded);
   if (isNumber) return null;
   var as = Comp.as,
@@ -33,7 +37,13 @@ var Quote = exports.Quote = function Quote(props) {
     reset = (0, _objectWithoutProperties2["default"])(Comp, _excluded2);
   var Elm = as || 'span';
   var elmProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, other), reset);
-  var child = render && typeof render === 'function' && render(elmProps);
+  var result = {
+    value: value,
+    parentValue: parentValue,
+    keyName: keyName,
+    keys: keys || (keyName ? [keyName] : [])
+  };
+  var child = render && typeof render === 'function' && render(elmProps, result);
   if (child) return child;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Elm, (0, _objectSpread2["default"])({}, elmProps));
 };
@@ -48,12 +58,16 @@ var ValueQuote = exports.ValueQuote = function ValueQuote(props) {
     reset = (0, _objectWithoutProperties2["default"])(Comp, _excluded3);
   var Elm = as || 'span';
   var elmProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, other), reset);
-  var child = render && typeof render === 'function' && render(elmProps);
+  var child = render && typeof render === 'function' && render(elmProps, {});
   if (child) return child;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Elm, (0, _objectSpread2["default"])({}, elmProps));
 };
 ValueQuote.displayName = 'JVR.ValueQuote';
-var Colon = exports.Colon = function Colon() {
+var Colon = exports.Colon = function Colon(props) {
+  var value = props.value,
+    parentValue = props.parentValue,
+    keyName = props.keyName,
+    keys = props.keys;
   var _useSymbolsStore3 = (0, _Symbols.useSymbolsStore)(),
     _useSymbolsStore3$Col = _useSymbolsStore3.Colon,
     Comp = _useSymbolsStore3$Col === void 0 ? {} : _useSymbolsStore3$Col;
@@ -61,7 +75,12 @@ var Colon = exports.Colon = function Colon() {
     render = Comp.render,
     reset = (0, _objectWithoutProperties2["default"])(Comp, _excluded4);
   var Elm = as || 'span';
-  var child = render && typeof render === 'function' && render(reset);
+  var child = render && typeof render === 'function' && render(reset, {
+    value: value,
+    parentValue: parentValue,
+    keyName: keyName,
+    keys: keys || (keyName ? [keyName] : [])
+  });
   if (child) return child;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Elm, (0, _objectSpread2["default"])({}, reset));
 };
@@ -71,7 +90,12 @@ var Arrow = exports.Arrow = function Arrow(props) {
     _useSymbolsStore4$Arr = _useSymbolsStore4.Arrow,
     Comp = _useSymbolsStore4$Arr === void 0 ? {} : _useSymbolsStore4$Arr;
   var expands = (0, _Expands.useExpandsStore)();
-  var expandKey = props.expandKey;
+  var expandKey = props.expandKey,
+    resetStyle = props.style,
+    value = props.value,
+    parentValue = props.parentValue,
+    keyName = props.keyName,
+    keys = props.keys;
   var isExpanded = !!expands[expandKey];
   var as = Comp.as,
     style = Comp.style,
@@ -79,44 +103,71 @@ var Arrow = exports.Arrow = function Arrow(props) {
     reset = (0, _objectWithoutProperties2["default"])(Comp, _excluded5);
   var Elm = as || 'span';
   var isRender = render && typeof render === 'function';
-  var child = isRender && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+  var elmProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
     'data-expanded': isExpanded,
-    style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), props.style)
-  }));
+    style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), resetStyle)
+  });
+  var result = {
+    value: value,
+    parentValue: parentValue,
+    keyName: keyName,
+    keys: keys || (keyName ? [keyName] : [])
+  };
+  var child = isRender && render(elmProps, result);
   if (child) return child;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Elm, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
-    style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), props.style)
+    style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), resetStyle)
   }));
 };
 Arrow.displayName = 'JVR.Arrow';
-var BracketsOpen = exports.BracketsOpen = function BracketsOpen(_ref) {
-  var isBrackets = _ref.isBrackets;
+var BracketsOpen = exports.BracketsOpen = function BracketsOpen(props) {
+  var isBrackets = props.isBrackets,
+    value = props.value,
+    parentValue = props.parentValue,
+    keyName = props.keyName,
+    keys = props.keys;
   var _useSymbolsStore5 = (0, _Symbols.useSymbolsStore)(),
     _useSymbolsStore5$Bra = _useSymbolsStore5.BracketsLeft,
     BracketsLeft = _useSymbolsStore5$Bra === void 0 ? {} : _useSymbolsStore5$Bra,
     _useSymbolsStore5$Bra2 = _useSymbolsStore5.BraceLeft,
     BraceLeft = _useSymbolsStore5$Bra2 === void 0 ? {} : _useSymbolsStore5$Bra2;
+  var result = {
+    value: value,
+    parentValue: parentValue,
+    keyName: keyName,
+    keys: keys || (keyName ? [keyName] : [])
+  };
   if (isBrackets) {
     var as = BracketsLeft.as,
       _render = BracketsLeft.render,
       reset = (0, _objectWithoutProperties2["default"])(BracketsLeft, _excluded6);
     var BracketsLeftComp = as || 'span';
-    var _child = _render && typeof _render === 'function' && _render(reset);
+    var _child = _render && typeof _render === 'function' && _render(reset, result);
     if (_child) return _child;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(BracketsLeftComp, (0, _objectSpread2["default"])({}, reset));
   }
   var elm = BraceLeft.as,
     render = BraceLeft.render,
-    props = (0, _objectWithoutProperties2["default"])(BraceLeft, _excluded7);
+    resetProps = (0, _objectWithoutProperties2["default"])(BraceLeft, _excluded7);
   var BraceLeftComp = elm || 'span';
-  var child = render && typeof render === 'function' && render(props);
+  var child = render && typeof render === 'function' && render(resetProps, result);
   if (child) return child;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BraceLeftComp, (0, _objectSpread2["default"])({}, props));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BraceLeftComp, (0, _objectSpread2["default"])({}, resetProps));
 };
 BracketsOpen.displayName = 'JVR.BracketsOpen';
-var BracketsClose = exports.BracketsClose = function BracketsClose(_ref2) {
-  var isBrackets = _ref2.isBrackets,
-    isVisiable = _ref2.isVisiable;
+var BracketsClose = exports.BracketsClose = function BracketsClose(props) {
+  var isBrackets = props.isBrackets,
+    isVisiable = props.isVisiable,
+    value = props.value,
+    parentValue = props.parentValue,
+    keyName = props.keyName,
+    keys = props.keys;
+  var result = {
+    value: value,
+    parentValue: parentValue,
+    keyName: keyName,
+    keys: keys || (keyName ? [keyName] : [])
+  };
   if (!isVisiable) return null;
   var _useSymbolsStore6 = (0, _Symbols.useSymbolsStore)(),
     _useSymbolsStore6$Bra = _useSymbolsStore6.BracketsRight,
@@ -128,7 +179,7 @@ var BracketsClose = exports.BracketsClose = function BracketsClose(_ref2) {
       _render2 = BracketsRight.render,
       _reset = (0, _objectWithoutProperties2["default"])(BracketsRight, _excluded8);
     var BracketsRightComp = as || 'span';
-    var _child2 = _render2 && typeof _render2 === 'function' && _render2(_reset);
+    var _child2 = _render2 && typeof _render2 === 'function' && _render2(_reset, result);
     if (_child2) return _child2;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(BracketsRightComp, (0, _objectSpread2["default"])({}, _reset));
   }
@@ -136,7 +187,7 @@ var BracketsClose = exports.BracketsClose = function BracketsClose(_ref2) {
     render = BraceRight.render,
     reset = (0, _objectWithoutProperties2["default"])(BraceRight, _excluded9);
   var BraceRightComp = elm || 'span';
-  var child = render && typeof render === 'function' && render(reset);
+  var child = render && typeof render === 'function' && render(reset, result);
   if (child) return child;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(BraceRightComp, (0, _objectSpread2["default"])({}, reset));
 };

package/esm/Container.js

@@ -52,7 +52,8 @@ export var Container = /*#__PURE__*/forwardRef((props, ref) => {
     }), /*#__PURE__*/_jsx(NestedClose, {
       expandKey: subkeyid,
       value: value,
-      level: level
+      level: level,
+      keys: keys
     })]
   }));
 });

package/esm/comps/KeyValues.js

@@ -24,10 +24,19 @@ export var KeyValues = props => {
   var {
     objectSortKeys,
     indentWidth,
-    collapsed
+    collapsed,
+    shouldExpandNodeInitially
   } = useStore();
   var isMyArray = Array.isArray(value);
-  var isExpanded = (_expands$expandKey = expands[expandKey]) != null ? _expands$expandKey : typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
+  var defaultExpanded = typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
+  var isExpanded = (_expands$expandKey = expands[expandKey]) != null ? _expands$expandKey : defaultExpanded;
+  if (expands[expandKey] === undefined && shouldExpandNodeInitially && shouldExpandNodeInitially(isExpanded, {
+    value,
+    keys,
+    level
+  })) {
+    return null;
+  }
   if (isExpanded) {
     return null;
   }
@@ -82,23 +91,25 @@ export var KayName = props => {
     highlightUpdates,
     highlightContainer
   });
+  var compProps = {
+    keyName,
+    value,
+    keys,
+    parentValue
+  };
   return /*#__PURE__*/_jsxs(Fragment, {
     children: [/*#__PURE__*/_jsxs("span", {
       ref: highlightContainer,
-      children: [/*#__PURE__*/_jsx(Quote, {
+      children: [/*#__PURE__*/_jsx(Quote, _extends({
         isNumber: isNumber,
         "data-placement": "left"
-      }), /*#__PURE__*/_jsx(KeyNameComp, {
-        keyName: keyName,
-        value: value,
-        keys: keys,
-        parentValue: parentValue,
+      }, compProps)), /*#__PURE__*/_jsx(KeyNameComp, _extends({}, compProps, {
         children: keyName
-      }), /*#__PURE__*/_jsx(Quote, {
+      })), /*#__PURE__*/_jsx(Quote, _extends({
         isNumber: isNumber,
         "data-placement": "right"
-      })]
-    }), /*#__PURE__*/_jsx(Colon, {})]
+      }, compProps))]
+    }), /*#__PURE__*/_jsx(Colon, _extends({}, compProps))]
   });
 };
 KayName.displayName = 'JVR.KayName';

package/esm/comps/NestedClose.d.ts

@@ -2,6 +2,7 @@ interface NestedCloseProps<T extends object> {
     value?: T;
     expandKey: string;
     level: number;
+    keys?: (string | number)[];
 }
 export declare const NestedClose: {
     <T extends object>(props: NestedCloseProps<T>): import("react/jsx-runtime").JSX.Element | null;

package/esm/comps/NestedClose.js

@@ -7,16 +7,26 @@ export var NestedClose = props => {
   var {
     value,
     expandKey,
-    level
+    level,
+    keys = []
   } = props;
   var expands = useExpandsStore();
   var isArray = Array.isArray(value);
   var {
-    collapsed
+    collapsed,
+    shouldExpandNodeInitially
   } = useStore();
   var isMySet = value instanceof Set;
-  var isExpanded = (_expands$expandKey = expands[expandKey]) != null ? _expands$expandKey : typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
+  var defaultExpanded = typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
+  var isExpanded = (_expands$expandKey = expands[expandKey]) != null ? _expands$expandKey : defaultExpanded;
   var len = Object.keys(value).length;
+  if (expands[expandKey] === undefined && shouldExpandNodeInitially && shouldExpandNodeInitially(isExpanded, {
+    value,
+    keys,
+    level
+  })) {
+    return null;
+  }
   if (isExpanded || len === 0) {
     return null;
   }

package/esm/comps/NestedOpen.js

@@ -14,7 +14,7 @@ export var NestedOpen = props => {
   var {
     keyName,
     expandKey,
-    keys,
+    keys = [],
     initialValue,
     value,
     parentValue,
@@ -24,12 +24,22 @@ export var NestedOpen = props => {
   var dispatchExpands = useExpandsDispatch();
   var {
     onExpand,
-    collapsed
+    collapsed,
+    shouldExpandNodeInitially
   } = useStore();
   var isArray = Array.isArray(value);
   var isMySet = value instanceof Set;
-  var isExpanded = (_expands$expandKey = expands[expandKey]) != null ? _expands$expandKey : typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
+  var defaultExpanded = typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
   var isObject = typeof value === 'object';
+  var isExpanded = (_expands$expandKey = expands[expandKey]) != null ? _expands$expandKey : defaultExpanded;
+  var shouldExpand = shouldExpandNodeInitially && shouldExpandNodeInitially(isExpanded, {
+    value,
+    keys,
+    level
+  });
+  if (expands[expandKey] === undefined && shouldExpand !== undefined) {
+    isExpanded = shouldExpand;
+  }
   var click = () => {
     var opt = {
       expand: !isExpanded,
@@ -58,11 +68,17 @@ export var NestedOpen = props => {
   if (showArrow) {
     reset.onClick = click;
   }
+  var compProps = {
+    keyName,
+    value,
+    keys,
+    parentValue
+  };
   return /*#__PURE__*/_jsxs("span", _extends({}, reset, {
-    children: [showArrow && /*#__PURE__*/_jsx(Arrow, {
+    children: [showArrow && /*#__PURE__*/_jsx(Arrow, _extends({
       style: arrowStyle,
       expandKey: expandKey
-    }), (keyName || typeof keyName === 'number') && /*#__PURE__*/_jsx(KayName, {
+    }, compProps)), (keyName || typeof keyName === 'number') && /*#__PURE__*/_jsx(KayName, {
       keyName: keyName
     }), /*#__PURE__*/_jsx(SetComp, {
       value: initialValue,
@@ -70,16 +86,16 @@ export var NestedOpen = props => {
     }), /*#__PURE__*/_jsx(MapComp, {
       value: initialValue,
       keyName: keyName
-    }), /*#__PURE__*/_jsx(BracketsOpen, {
+    }), /*#__PURE__*/_jsx(BracketsOpen, _extends({
       isBrackets: isArray || isMySet
-    }), /*#__PURE__*/_jsx(EllipsisComp, {
+    }, compProps)), /*#__PURE__*/_jsx(EllipsisComp, {
       keyName: keyName,
       value: value,
       isExpanded: isExpanded
-    }), /*#__PURE__*/_jsx(BracketsClose, {
+    }), /*#__PURE__*/_jsx(BracketsClose, _extends({
       isVisiable: isExpanded || !showArrow,
       isBrackets: isArray || isMySet
-    }), /*#__PURE__*/_jsx(CountInfoComp, {
+    }, compProps)), /*#__PURE__*/_jsx(CountInfoComp, {
       value: value,
       keyName: keyName
     }), /*#__PURE__*/_jsx(CountInfoExtraComps, {

package/esm/index.d.ts

@@ -48,6 +48,12 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
     enableClipboard?: boolean;
     /** When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. @default false */
     collapsed?: boolean | number;
+    /** Determine whether the node should be expanded on the first render, or you can use collapsed to control the level of expansion (by default, the root is expanded). */
+    shouldExpandNodeInitially?: (isExpanded: boolean, props: {
+        value?: T;
+        keys: (number | string)[];
+        level: number;
+    }) => boolean;
     /** Whether to highlight updates. @default true */
     highlightUpdates?: boolean;
     /** Shorten long JSON strings, Set to `0` to disable this feature @default 30 */

package/esm/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["className", "style", "value", "children", "collapsed", "indentWidth", "displayObjectSize", "shortenTextAfterLength", "highlightUpdates", "enableClipboard", "displayDataTypes", "objectSortKeys", "onExpand", "onCopied"];
+var _excluded = ["className", "style", "value", "children", "collapsed", "shouldExpandNodeInitially", "indentWidth", "displayObjectSize", "shortenTextAfterLength", "highlightUpdates", "enableClipboard", "displayDataTypes", "objectSortKeys", "onExpand", "onCopied"];
 import { forwardRef } from 'react';
 import { Provider } from './store';
 import { Container } from './Container';
@@ -45,6 +45,7 @@ var JsonView = /*#__PURE__*/forwardRef((props, ref) => {
       value,
       children,
       collapsed,
+      shouldExpandNodeInitially,
       indentWidth = 15,
       displayObjectSize = true,
       shortenTextAfterLength = 30,
@@ -69,6 +70,7 @@ var JsonView = /*#__PURE__*/forwardRef((props, ref) => {
       value,
       objectSortKeys,
       indentWidth,
+      shouldExpandNodeInitially,
       displayObjectSize,
       collapsed,
       enableClipboard,

package/esm/store/Symbols.d.ts

@@ -1,8 +1,15 @@
 import { FC, PropsWithChildren, ElementType, ComponentPropsWithoutRef } from 'react';
 import { type TagType } from './Types';
+export interface SymbolsElementResult<T extends object, K = string | number> {
+    value?: T;
+    parentValue?: T;
+    keyName?: K;
+    /** Index of the parent `keyName` */
+    keys?: K[];
+}
 type SymbolsElementProps<T extends TagType = 'span'> = {
     as?: T;
-    render?: (props: SymbolsElement<T>) => React.ReactNode;
+    render?: (props: SymbolsElement<T>, result: SymbolsElementResult<object>) => React.ReactNode;
     'data-type'?: string;
 };
 export type SymbolsElement<T extends TagType = 'span'> = SymbolsElementProps<T> & ComponentPropsWithoutRef<T>;

package/esm/store.d.ts

@@ -12,6 +12,7 @@ export interface InitialState<T extends object> {
     enableClipboard?: JsonViewProps<T>['enableClipboard'];
     highlightUpdates?: JsonViewProps<T>['highlightUpdates'];
     collapsed?: JsonViewProps<T>['collapsed'];
+    shouldExpandNodeInitially?: JsonViewProps<T>['shouldExpandNodeInitially'];
     indentWidth?: number;
 }
 export declare const initialState: InitialState<object>;

package/esm/symbol/index.d.ts

@@ -1,9 +1,9 @@
-import { type SymbolsElement } from '../store/Symbols';
+import { type SymbolsElement, type SymbolsElementResult } from '../store/Symbols';
 import { type TagType } from '../store/Types';
 export declare const Quote: {
-    (props: {
+    <T extends object>(props: {
         isNumber?: boolean;
-    } & React.HTMLAttributes<HTMLElement>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
+    } & React.HTMLAttributes<HTMLElement> & SymbolsElementResult<T>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };
 export declare const ValueQuote: {
@@ -11,19 +11,19 @@ export declare const ValueQuote: {
     displayName: string;
 };
 export declare const Colon: {
-    (): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
+    <T extends object>(props: SymbolsElementResult<T>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const Arrow: {
-    <T extends TagType>(props: SymbolsElement<T> & {
+    <T extends TagType, K extends object>(props: SymbolsElement<T> & {
         expandKey: string;
-    }): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
+    } & SymbolsElementResult<K>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const BracketsOpen: {
-    ({ isBrackets }: {
+    <K extends object>(props: {
         isBrackets?: boolean;
-    }): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
+    } & SymbolsElementResult<K>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 type BracketsCloseProps = {
@@ -31,7 +31,7 @@ type BracketsCloseProps = {
     isVisiable?: boolean;
 };
 export declare const BracketsClose: {
-    ({ isBrackets, isVisiable }: BracketsCloseProps): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
+    <K extends object>(props: BracketsCloseProps & SymbolsElementResult<K>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };
 export {};

package/esm/symbol/index.js

@@ -1,7 +1,7 @@
 import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["isNumber"],
+var _excluded = ["isNumber", "value", "parentValue", "keyName", "keys"],
   _excluded2 = ["as", "render"],
   _excluded3 = ["as", "render"],
   _excluded4 = ["as", "render"],
@@ -18,7 +18,11 @@ export var Quote = props => {
     Quote: Comp = {}
   } = useSymbolsStore();
   var {
-      isNumber
+      isNumber,
+      value,
+      parentValue,
+      keyName,
+      keys
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   if (isNumber) return null;
@@ -29,7 +33,13 @@ export var Quote = props => {
     reset = _objectWithoutPropertiesLoose(Comp, _excluded2);
   var Elm = as || 'span';
   var elmProps = _extends({}, other, reset);
-  var child = render && typeof render === 'function' && render(elmProps);
+  var result = {
+    value,
+    parentValue,
+    keyName,
+    keys: keys || (keyName ? [keyName] : [])
+  };
+  var child = render && typeof render === 'function' && render(elmProps, result);
   if (child) return child;
   return /*#__PURE__*/_jsx(Elm, _extends({}, elmProps));
 };
@@ -46,12 +56,18 @@ export var ValueQuote = props => {
     reset = _objectWithoutPropertiesLoose(Comp, _excluded3);
   var Elm = as || 'span';
   var elmProps = _extends({}, other, reset);
-  var child = render && typeof render === 'function' && render(elmProps);
+  var child = render && typeof render === 'function' && render(elmProps, {});
   if (child) return child;
   return /*#__PURE__*/_jsx(Elm, _extends({}, elmProps));
 };
 ValueQuote.displayName = 'JVR.ValueQuote';
-export var Colon = () => {
+export var Colon = props => {
+  var {
+    value,
+    parentValue,
+    keyName,
+    keys
+  } = props;
   var {
     Colon: Comp = {}
   } = useSymbolsStore();
@@ -61,7 +77,12 @@ export var Colon = () => {
     } = Comp,
     reset = _objectWithoutPropertiesLoose(Comp, _excluded4);
   var Elm = as || 'span';
-  var child = render && typeof render === 'function' && render(reset);
+  var child = render && typeof render === 'function' && render(reset, {
+    value,
+    parentValue,
+    keyName,
+    keys: keys || (keyName ? [keyName] : [])
+  });
   if (child) return child;
   return /*#__PURE__*/_jsx(Elm, _extends({}, reset));
 };
@@ -72,7 +93,12 @@ export var Arrow = props => {
   } = useSymbolsStore();
   var expands = useExpandsStore();
   var {
-    expandKey
+    expandKey,
+    style: resetStyle,
+    value,
+    parentValue,
+    keyName,
+    keys
   } = props;
   var isExpanded = !!expands[expandKey];
   var {
@@ -83,24 +109,41 @@ export var Arrow = props => {
     reset = _objectWithoutPropertiesLoose(Comp, _excluded5);
   var Elm = as || 'span';
   var isRender = render && typeof render === 'function';
-  var child = isRender && render(_extends({}, reset, {
+  var elmProps = _extends({}, reset, {
     'data-expanded': isExpanded,
-    style: _extends({}, style, props.style)
-  }));
+    style: _extends({}, style, resetStyle)
+  });
+  var result = {
+    value,
+    parentValue,
+    keyName,
+    keys: keys || (keyName ? [keyName] : [])
+  };
+  var child = isRender && render(elmProps, result);
   if (child) return child;
   return /*#__PURE__*/_jsx(Elm, _extends({}, reset, {
-    style: _extends({}, style, props.style)
+    style: _extends({}, style, resetStyle)
   }));
 };
 Arrow.displayName = 'JVR.Arrow';
-export var BracketsOpen = _ref => {
+export var BracketsOpen = props => {
   var {
-    isBrackets
-  } = _ref;
+    isBrackets,
+    value,
+    parentValue,
+    keyName,
+    keys
+  } = props;
   var {
     BracketsLeft = {},
     BraceLeft = {}
   } = useSymbolsStore();
+  var result = {
+    value,
+    parentValue,
+    keyName,
+    keys: keys || (keyName ? [keyName] : [])
+  };
   if (isBrackets) {
     var {
         as,
@@ -108,7 +151,7 @@ export var BracketsOpen = _ref => {
       } = BracketsLeft,
       reset = _objectWithoutPropertiesLoose(BracketsLeft, _excluded6);
     var BracketsLeftComp = as || 'span';
-    var _child = _render && typeof _render === 'function' && _render(reset);
+    var _child = _render && typeof _render === 'function' && _render(reset, result);
     if (_child) return _child;
     return /*#__PURE__*/_jsx(BracketsLeftComp, _extends({}, reset));
   }
@@ -116,18 +159,28 @@ export var BracketsOpen = _ref => {
       as: elm,
       render
     } = BraceLeft,
-    props = _objectWithoutPropertiesLoose(BraceLeft, _excluded7);
+    resetProps = _objectWithoutPropertiesLoose(BraceLeft, _excluded7);
   var BraceLeftComp = elm || 'span';
-  var child = render && typeof render === 'function' && render(props);
+  var child = render && typeof render === 'function' && render(resetProps, result);
   if (child) return child;
-  return /*#__PURE__*/_jsx(BraceLeftComp, _extends({}, props));
+  return /*#__PURE__*/_jsx(BraceLeftComp, _extends({}, resetProps));
 };
 BracketsOpen.displayName = 'JVR.BracketsOpen';
-export var BracketsClose = _ref2 => {
+export var BracketsClose = props => {
   var {
     isBrackets,
-    isVisiable
-  } = _ref2;
+    isVisiable,
+    value,
+    parentValue,
+    keyName,
+    keys
+  } = props;
+  var result = {
+    value,
+    parentValue,
+    keyName,
+    keys: keys || (keyName ? [keyName] : [])
+  };
   if (!isVisiable) return null;
   var {
     BracketsRight = {},
@@ -140,7 +193,7 @@ export var BracketsClose = _ref2 => {
       } = BracketsRight,
       _reset = _objectWithoutPropertiesLoose(BracketsRight, _excluded8);
     var BracketsRightComp = as || 'span';
-    var _child2 = _render2 && typeof _render2 === 'function' && _render2(_reset);
+    var _child2 = _render2 && typeof _render2 === 'function' && _render2(_reset, result);
     if (_child2) return _child2;
     return /*#__PURE__*/_jsx(BracketsRightComp, _extends({}, _reset));
   }
@@ -150,7 +203,7 @@ export var BracketsClose = _ref2 => {
     } = BraceRight,
     reset = _objectWithoutPropertiesLoose(BraceRight, _excluded9);
   var BraceRightComp = elm || 'span';
-  var child = render && typeof render === 'function' && render(reset);
+  var child = render && typeof render === 'function' && render(reset, result);
   if (child) return child;
   return /*#__PURE__*/_jsx(BraceRightComp, _extends({}, reset));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-json-view",
-  "version": "2.0.0-alpha.27",
+  "version": "2.0.0-alpha.29",
   "description": "JSON viewer for react.",
   "main": "cjs/index.js",
   "module": "esm/index.js",