@uiw/react-json-view - npm Package Compare versions

Comparing version 2.0.0-alpha.27 to 2.0.0-alpha.28

cjs/comps/KeyValues.js

@@ -8,5 +8,5 @@ "use strict";
 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"));
@@ -103,19 +103,21 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
   });
+  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))]
   });
@@ -122,0 +124,0 @@ };

cjs/comps/NestedOpen.js

@@ -65,7 +65,13 @@ "use strict";
   }
+  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
@@ -78,12 +84,12 @@ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_types.SetComp, {
       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,
@@ -90,0 +96,0 @@ keyName: keyName

cjs/store/Symbols.d.ts

 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;
@@ -7,0 +14,0 @@ };

cjs/symbol/index.d.ts

@@ -1,7 +0,7 @@
-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;
@@ -14,15 +14,15 @@ };
 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;
@@ -35,5 +35,5 @@ };
 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 {};

cjs/symbol/index.js

@@ -15,3 +15,3 @@ "use strict";
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["isNumber"],
+var _excluded = ["isNumber", "value", "parentValue", "keyName", "keys"],
   _excluded2 = ["as", "render"],
@@ -30,2 +30,6 @@ _excluded3 = ["as", "render"],
   var isNumber = props.isNumber,
+    value = props.value,
+    parentValue = props.parentValue,
+    keyName = props.keyName,
+    keys = props.keys,
     other = (0, _objectWithoutProperties2["default"])(props, _excluded);
@@ -38,3 +42,9 @@ if (isNumber) return null;
   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;
@@ -54,3 +64,3 @@ return /*#__PURE__*/(0, _jsxRuntime.jsx)(Elm, (0, _objectSpread2["default"])({}, elmProps));
   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;
@@ -60,3 +70,7 @@ 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)(),
@@ -69,3 +83,8 @@ _useSymbolsStore3$Col = _useSymbolsStore3.Colon,
   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;
@@ -80,3 +99,8 @@ return /*#__PURE__*/(0, _jsxRuntime.jsx)(Elm, (0, _objectSpread2["default"])({}, reset));
   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];
@@ -89,14 +113,25 @@ var as = Comp.as,
   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)(),
@@ -107,2 +142,8 @@ _useSymbolsStore5$Bra = _useSymbolsStore5.BracketsLeft,
     BraceLeft = _useSymbolsStore5$Bra2 === void 0 ? {} : _useSymbolsStore5$Bra2;
+  var result = {
+    value: value,
+    parentValue: parentValue,
+    keyName: keyName,
+    keys: keys || (keyName ? [keyName] : [])
+  };
   if (isBrackets) {
@@ -113,3 +154,3 @@ var as = BracketsLeft.as,
     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;
@@ -120,12 +161,22 @@ return /*#__PURE__*/(0, _jsxRuntime.jsx)(BracketsLeftComp, (0, _objectSpread2["default"])({}, reset));
     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;
@@ -142,3 +193,3 @@ var _useSymbolsStore6 = (0, _Symbols.useSymbolsStore)(),
     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;
@@ -151,3 +202,3 @@ return /*#__PURE__*/(0, _jsxRuntime.jsx)(BracketsRightComp, (0, _objectSpread2["default"])({}, _reset));
   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;
@@ -154,0 +205,0 @@ return /*#__PURE__*/(0, _jsxRuntime.jsx)(BraceRightComp, (0, _objectSpread2["default"])({}, reset));

esm/comps/KeyValues.js

@@ -85,19 +85,21 @@ import _extends from "@babel/runtime/helpers/extends";
   });
+  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))]
   });
@@ -104,0 +106,0 @@ };

esm/comps/NestedOpen.js

@@ -61,7 +61,13 @@ import _extends from "@babel/runtime/helpers/extends";
   }
+  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
@@ -74,12 +80,12 @@ }), /*#__PURE__*/_jsx(SetComp, {
       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,
@@ -86,0 +92,0 @@ keyName: keyName

esm/store/Symbols.d.ts

 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;
@@ -7,0 +14,0 @@ };

esm/symbol/index.d.ts

@@ -1,7 +0,7 @@
-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;
@@ -14,15 +14,15 @@ };
 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;
@@ -35,5 +35,5 @@ };
 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 {};

esm/symbol/index.js

 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"],
@@ -21,3 +21,7 @@ _excluded3 = ["as", "render"],
   var {
-      isNumber
+      isNumber,
+      value,
+      parentValue,
+      keyName,
+      keys
     } = props,
@@ -33,3 +37,9 @@ other = _objectWithoutPropertiesLoose(props, _excluded);
   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;
@@ -51,3 +61,3 @@ return /*#__PURE__*/_jsx(Elm, _extends({}, elmProps));
   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;
@@ -57,4 +67,10 @@ 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 = {}
@@ -68,3 +84,8 @@ } = useSymbolsStore();
   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;
@@ -80,3 +101,8 @@ return /*#__PURE__*/_jsx(Elm, _extends({}, reset));
   var {
-    expandKey
+    expandKey,
+    style: resetStyle,
+    value,
+    parentValue,
+    keyName,
+    keys
   } = props;
@@ -92,16 +118,27 @@ var isExpanded = !!expands[expandKey];
   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 {
@@ -111,2 +148,8 @@ BracketsLeft = {},
   } = useSymbolsStore();
+  var result = {
+    value,
+    parentValue,
+    keyName,
+    keys: keys || (keyName ? [keyName] : [])
+  };
   if (isBrackets) {
@@ -119,3 +162,3 @@ var {
     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;
@@ -128,14 +171,24 @@ return /*#__PURE__*/_jsx(BracketsLeftComp, _extends({}, reset));
     } = 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;
@@ -153,3 +206,3 @@ var {
     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;
@@ -164,3 +217,3 @@ return /*#__PURE__*/_jsx(BracketsRightComp, _extends({}, _reset));
   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;
@@ -167,0 +220,0 @@ return /*#__PURE__*/_jsx(BraceRightComp, _extends({}, reset));

package.json

 {
   "name": "@uiw/react-json-view",
-  "version": "2.0.0-alpha.27",
+  "version": "2.0.0-alpha.28",
   "description": "JSON viewer for react.",
@@ -5,0 +5,0 @@ "main": "cjs/index.js",

README.md

@@ -130,3 +130,2 @@ react-json-view
 
-
 Example of custom `vscode` theme styles: 
@@ -686,2 +685,31 @@
 
+## 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>
+  )
+}
+```
+
 ## Modify Icon Style
@@ -688,0 +716,0 @@

No alert changes

Improved metrics

Total package byte prevSize

321792

increased by1.52%

Lines of code

7534

increased by1.81%

Number of lines in readme file

978

increased by2.95%

No dependency changes