@uiw/react-json-view 1.1.1 → 1.3.0

package/README.md

@@ -4,6 +4,7 @@ react-json-view
 [![CI](https://github.com/uiwjs/react-json-view/actions/workflows/ci.yml/badge.svg)](https://github.com/uiwjs/react-json-view/actions/workflows/ci.yml)
 [![npm version](https://img.shields.io/npm/v/@uiw/react-json-view.svg)](https://www.npmjs.com/package/@uiw/react-json-view)
 [![react@^18](https://shields.io/badge/react-^18-green?style=flat&logo=react)](https://github.com/facebook/react/releases)
+[![Coverage Status](https://uiwjs.github.io/react-json-view/badges.svg)](https://uiwjs.github.io/react-json-view/lcov-report/)
 
 A React component for displaying and editing javascript arrays and JSON objects.
 
@@ -22,7 +23,8 @@ A React component for displaying and editing javascript arrays and JSON objects.
 📚 Use Typescript to write, better code hints.  
 🎨 Support theme customization & [`online editing`](https://uiwjs.github.io/react-json-view/#online-editing-theme) theme  
 🌒 Support dark/light mode  
-📦 Zero dependencies
+📦 Zero dependencies  
+♻️ Whether to highlight updates.
 
 ## Quick Start
 
@@ -111,6 +113,7 @@ const customTheme = {
   '--w-rjv-line-color': '#323232',
   '--w-rjv-arrow-color': 'var(--w-rjv-color)',
   '--w-rjv-info-color': '#656565',
+  '--w-rjv-update-color': '#ebcb8b',
   '--w-rjv-copied-color': '#9cdcfe',
   '--w-rjv-copied-success-color': '#28a745',
 
@@ -140,7 +143,7 @@ export default function Demo() {
 Online custom style example, please check in the [documentation website](https://uiwjs.github.io/react-json-view/)
 
 ```tsx mdx:preview:&title=Online Editing Theme
-import React, { useState, useRef } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import Colorful from '@uiw/react-color-colorful';
 import JsonView from '@uiw/react-json-view';
 
@@ -172,6 +175,7 @@ const customTheme = {
   '--w-rjv-line-color': '#323232',
   '--w-rjv-arrow-color': '#9cdcfe',
   '--w-rjv-info-color': '#656565',
+  '--w-rjv-update-color': '#ebcb8b',
   '--w-rjv-copied-color': '#0184a6',
   '--w-rjv-copied-success-color': '#28a745',
 
@@ -197,10 +201,23 @@ export default function Demo() {
     setHex(hexa);
     setTheme({ ...theme, [cssvar]: hexa });
   };
+
+  const [src, setSrc] = useState({ ...object })
+  useEffect(() => {
+    const loop = () => {
+      setSrc(src => ({
+        ...src,
+        timer: src.timer + 1
+      }))
+    }
+    const id = setInterval(loop, 1000)
+    return () => clearInterval(id)
+  }, []);
+
   return (
     <React.Fragment>
       <div style={{ display: 'flex', gap: '1rem' }}>
-        <JsonView value={object} keyName="root" style={{ flex: 1, ...theme }} />
+        <JsonView value={src} keyName="root" style={{ flex: 1, ...theme }} />
         <div>
           <Colorful color={hex} onChange={onChange} />
           <div style={{ display: 'flex', gap: '0.4rem', flexWrap: 'wrap' }}>
@@ -305,6 +322,50 @@ export default function Demo() {
 }
 ```
 
+## Highlight Updates
+
+```tsx mdx:preview
+import React, { useState, useEffect } from 'react';
+import JsonView from '@uiw/react-json-view';
+import { TriangleArrow } from '@uiw/react-json-view/triangle-arrow';
+import { TriangleSolidArrow } from '@uiw/react-json-view/triangle-solid-arrow';
+
+const object = {
+  string: 'Lorem ipsum dolor sit amet',
+  integer: 42,
+  timer: 0,
+  object: { 'first-child': true, 'second-child': false, 'last-child': null },
+}
+export default function Demo() {
+  const [src, setSrc] = useState({ ...object })
+  useEffect(() => {
+    const loop = () => {
+      setSrc(src => ({
+        ...src,
+        timer: src.timer + 1
+      }))
+    }
+    const id = setInterval(loop, 1000)
+    return () => clearInterval(id)
+  }, []);
+
+  return (
+    <JsonView
+      value={src}
+      keyName="root"
+      style={{
+        '--w-rjv-background-color': '#ffffff',
+        '--w-rjv-border-left': '1px dashed #ebebeb',
+        // ✅ Change default update background color ✅
+        '--w-rjv-update-color': '#ff6ffd',
+      }}
+    />
+  )
+}
+```
+
+This feature can be disabled with `highlightUpdates={false}`, and the default color can be changed with `--w-rjv-update-color`.
+
 ## Modify Icon Style
 
 Use built-in default icons.
@@ -368,34 +429,25 @@ const object = {
 }
 
 const Arrow = (props) => {
-  const { style, 'data-expand': expand,  ...reset } = props;
-  const defaultStyle = {
-    cursor: 'pointer',
-    height: '1em',
-    width: '1em',
-  };
+  const { style, 'data-expand': expand, ...reset } = props;
+  const svgProps = {
+    style: { cursor: 'pointer', height: '1em', width: '1em' },
+    viewBox: '0 0 24 24',
+    fill: 'var(--w-rjv-arrow-color, currentColor)',
+    ...reset
+  }
   if (!expand) {
     return (
-      <svg
-        viewBox="0 0 24 24"
-        fill="var(--w-rjv-arrow-color, currentColor)"
-        style={defaultStyle}
-        {...reset}
-      >
+      <svg {...svgProps}>
         <path d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z" />
       </svg>
-    )
+    );
   }
   return (
-    <svg
-      viewBox="0 0 24 24"
-      fill="var(--w-rjv-arrow-color, currentColor)"
-      style={defaultStyle}
-      {...reset}
-    >
+    <svg {...svgProps}>
       <path d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M7,13H17V11H7" />
     </svg>
-  )
+  );
 }
 
 export default function Demo() {
@@ -433,6 +485,8 @@ export interface JsonViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttr
   keyName?: string | number;
   /** The user can copy objects and arrays to clipboard by clicking on the clipboard icon. @default true */
   enableClipboard?: boolean;
+  /** Whether to highlight updates. @default true */
+  highlightUpdates?: boolean;
   /** Display for quotes in object-key @default " */
   quotes?: "'" | '"' | '';
   /** When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. @default false */

package/cjs/copied.d.ts

@@ -2,6 +2,7 @@
 export interface CopiedProps<T = object> extends React.SVGProps<SVGSVGElement> {
     show?: boolean;
     text?: T;
+    onCopied?: (text: string, obj: T | '') => void;
     render?: (props: Omit<CopiedProps<T>, 'render'>) => JSX.Element;
 }
 export declare function Copied<T>(props: CopiedProps<T>): JSX.Element | null;

package/cjs/copied.js

@@ -10,12 +10,13 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["children", "style", "text", "render", "show"];
+var _excluded = ["children", "style", "text", "onCopied", "render", "show"];
 function Copied(props) {
   var children = props.children,
     style = props.style,
     _props$text = props.text,
     text = _props$text === void 0 ? '' : _props$text,
+    onCopied = props.onCopied,
     render = props.render,
     show = props.show,
     reset = (0, _objectWithoutProperties2["default"])(props, _excluded);
@@ -26,7 +27,7 @@ function Copied(props) {
     setCopied = _useState2[1];
   var click = function click(event) {
     event.stopPropagation();
-    var copyText = JSON.stringify(text, function (key, value) {
+    var copyText = JSON.stringify(text || '', function (key, value) {
       if (typeof value === 'bigint') {
         return value.toString();
       }
@@ -34,6 +35,7 @@ function Copied(props) {
     }, 2);
     if (text === Infinity) copyText = Infinity;
     navigator.clipboard.writeText(copyText).then(function () {
+      onCopied && onCopied(copyText, text);
       setCopied(true);
       var timer = setTimeout(function () {
         setCopied(false);

package/cjs/index.d.ts

@@ -17,6 +17,8 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
     keyName?: string | number;
     /** The user can copy objects and arrays to clipboard by clicking on the clipboard icon. @default true */
     enableClipboard?: boolean;
+    /** Whether to highlight updates. @default true */
+    highlightUpdates?: boolean;
     /** Display for quotes in object-key @default " */
     quotes?: "'" | '"' | '';
     /** When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. @default false */
@@ -28,6 +30,8 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
         keyid: string;
         keyName?: string | number;
     }) => void;
+    /** Fires event when you copy */
+    onCopied?: CopiedProps<T>['onCopied'];
     /** Redefine interface elements to re-render. */
     components?: {
         braces?: MetaProps['render'];

package/cjs/node.d.ts

@@ -6,6 +6,7 @@ export interface MetaProps extends LabelProps {
     start?: boolean;
     render?: (props: Pick<MetaProps, 'start' | 'isArray' | 'className' | 'children'>) => JSX.Element;
 }
+export declare function usePrevious<T>(value: T): T | undefined;
 export declare function Meta(props: MetaProps): JSX.Element;
 export interface EllipsisProps extends React.HTMLAttributes<HTMLSpanElement> {
     render?: (props: EllipsisProps) => JSX.Element;
@@ -13,6 +14,7 @@ export interface EllipsisProps extends React.HTMLAttributes<HTMLSpanElement> {
 export declare const Ellipsis: FC<PropsWithChildren<EllipsisProps>>;
 export interface SemicolonProps extends LabelProps {
     show?: boolean;
+    highlightUpdates?: boolean;
     quotes?: JsonViewProps<object>['quotes'];
     value?: object;
     render?: (props: Omit<SemicolonProps, 'show'> & {}) => JSX.Element;

package/cjs/node.js

@@ -8,8 +8,9 @@ exports.Ellipsis = exports.CountInfo = void 0;
 exports.Meta = Meta;
 exports.RooNode = RooNode;
 exports.Semicolon = void 0;
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+exports.usePrevious = usePrevious;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
@@ -20,8 +21,15 @@ var _copied = require("./copied");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["isArray", "start", "className", "render"],
   _excluded2 = ["style", "render"],
-  _excluded3 = ["children", "render", "color", "value", "className", "show", "quotes"],
-  _excluded4 = ["value", "keyName", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "indentWidth", "collapsed", "level", "keyid", "quotes", "onExpand"];
+  _excluded3 = ["children", "render", "color", "value", "className", "show", "highlightUpdates", "quotes"],
+  _excluded4 = ["value", "keyName", "className", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "highlightUpdates", "indentWidth", "collapsed", "level", "keyid", "quotes", "onCopied", "onExpand"];
+function usePrevious(value) {
+  var ref = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    ref.current = value;
+  });
+  return ref.current;
+}
 function Meta(props) {
   var _props$isArray = props.isArray,
     isArray = _props$isArray === void 0 ? false : _props$isArray,
@@ -77,8 +85,50 @@ var Semicolon = function Semicolon(_ref2) {
     _ref2$className = _ref2.className,
     className = _ref2$className === void 0 ? 'w-rjv-object-key' : _ref2$className,
     show = _ref2.show,
+    highlightUpdates = _ref2.highlightUpdates,
     quotes = _ref2.quotes,
     props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded3);
+  var prevValue = usePrevious(value);
+  var highlightContainer = (0, _react.useRef)(null);
+  var isHighlight = (0, _react.useMemo)(function () {
+    if (!highlightUpdates || prevValue === undefined) return false;
+    // highlight if value type changed
+    if ((0, _typeof2["default"])(value) !== (0, _typeof2["default"])(prevValue)) {
+      return true;
+    }
+    if (typeof value === 'number') {
+      // notice: NaN !== NaN
+      if (isNaN(value) && isNaN(prevValue)) return false;
+      return value !== prevValue;
+    }
+    // highlight if isArray changed
+    if (Array.isArray(value) !== Array.isArray(prevValue)) {
+      return true;
+    }
+    // not highlight object/function
+    // deep compare they will be slow
+    if ((0, _typeof2["default"])(value) === 'object' || typeof value === 'function') {
+      return false;
+    }
+
+    // highlight if not equal
+    if (value !== prevValue) {
+      return true;
+    }
+    return false;
+  }, [highlightUpdates, value]);
+  (0, _react.useEffect)(function () {
+    if (highlightContainer.current && isHighlight && 'animate' in highlightContainer.current) {
+      highlightContainer.current.animate([{
+        backgroundColor: 'var(--w-rjv-update-color, #ebcb8b)'
+      }, {
+        backgroundColor: ''
+      }], {
+        duration: 1000,
+        easing: 'ease-in'
+      });
+    }
+  }, [isHighlight, value]);
   var content = show ? "".concat(quotes).concat(children).concat(quotes) : children;
   if (render) return render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({
     className: className
@@ -93,6 +143,7 @@ var Semicolon = function Semicolon(_ref2) {
     className: className,
     color: color
   }, props), {}, {
+    ref: highlightContainer,
     children: content
   }));
 };
@@ -105,7 +156,7 @@ var CountInfo = function CountInfo(_ref3) {
       fontStyle: 'italic'
     },
     color: "var(--w-rjv-info-color, #0000004d)",
-    className: "object-size",
+    className: "w-rjv-object-size",
     children: children
   });
 };
@@ -115,6 +166,7 @@ function RooNode(props) {
   var _props$value = props.value,
     value = _props$value === void 0 ? {} : _props$value,
     keyName = props.keyName,
+    className = props.className,
     _props$displayDataTyp = props.displayDataTypes,
     displayDataTypes = _props$displayDataTyp === void 0 ? true : _props$displayDataTyp,
     _props$components = props.components,
@@ -123,6 +175,8 @@ function RooNode(props) {
     displayObjectSize = _props$displayObjectS === void 0 ? true : _props$displayObjectS,
     _props$enableClipboar = props.enableClipboard,
     enableClipboard = _props$enableClipboar === void 0 ? true : _props$enableClipboar,
+    _props$highlightUpdat = props.highlightUpdates,
+    highlightUpdates = _props$highlightUpdat === void 0 ? true : _props$highlightUpdat,
     _props$indentWidth = props.indentWidth,
     indentWidth = _props$indentWidth === void 0 ? 15 : _props$indentWidth,
     collapsed = props.collapsed,
@@ -132,6 +186,7 @@ function RooNode(props) {
     keyid = _props$keyid === void 0 ? 'root' : _props$keyid,
     _props$quotes = props.quotes,
     quotes = _props$quotes === void 0 ? '"' : _props$quotes,
+    onCopied = props.onCopied,
     onExpand = props.onExpand,
     reset = (0, _objectWithoutProperties2["default"])(props, _excluded4);
   var isArray = Array.isArray(value);
@@ -160,6 +215,8 @@ function RooNode(props) {
     displayDataTypes: displayDataTypes,
     displayObjectSize: displayObjectSize,
     enableClipboard: enableClipboard,
+    highlightUpdates: highlightUpdates,
+    onCopied: onCopied,
     onExpand: onExpand,
     collapsed: collapsed,
     quotes: quotes,
@@ -173,13 +230,16 @@ function RooNode(props) {
     displayObjectSize: displayObjectSize,
     enableClipboard: enableClipboard,
     indentWidth: indentWidth,
+    renderBraces: components.braces,
     renderValue: components.value
   };
   var arrowView = components.arrow ? /*#__PURE__*/(0, _react.cloneElement)(components.arrow, {
     style: arrowStyle,
-    'data-expand': expand
+    'data-expand': expand,
+    className: "w-rjv-arrow"
   }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_TriangleArrow.TriangleArrow, {
-    style: arrowStyle
+    style: arrowStyle,
+    className: "w-rjv-arrow"
   });
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -188,6 +248,7 @@ function RooNode(props) {
   var tools = enableClipboard ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_copied.Copied, {
     show: showTools,
     text: value,
+    onCopied: onCopied,
     render: components.copied
   }) : undefined;
   var eventProps = {};
@@ -199,7 +260,9 @@ function RooNode(props) {
       return setShowTools(false);
     };
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), eventProps), {}, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+    className: "".concat(className, " w-rjv-inner")
+  }, eventProps), {}, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_value.Line, {
       style: {
         display: 'inline-flex',
@@ -228,6 +291,7 @@ function RooNode(props) {
         children: [nameKeys.length, " items"]
       }), tools]
     }), expand && /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Line, {
+      className: "w-rjv-content",
       style: {
         borderLeft: 'var(--w-rjv-border-left-width, 1px) solid var(--w-rjv-line-color, #ebebeb)',
         marginLeft: 6
@@ -237,6 +301,7 @@ function RooNode(props) {
         var renderKey = /*#__PURE__*/(0, _jsxRuntime.jsx)(Semicolon, {
           value: item,
           quotes: quotes,
+          highlightUpdates: highlightUpdates,
           render: components.objectKey,
           color: typeof key === 'number' ? _value.typeMap['number'].color : '',
           show: typeof key === 'string',
@@ -246,6 +311,7 @@ function RooNode(props) {
         if (Array.isArray(item) && !isEmpty) {
           var label = isArray ? idx : key;
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Line, {
+            className: "w-rjv-wrap",
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(RooNode, (0, _objectSpread2["default"])({
               value: item,
               keyid: keyid + subkeyid + label,
@@ -255,6 +321,7 @@ function RooNode(props) {
         }
         if ((0, _typeof2["default"])(item) === 'object' && item && !(item instanceof Date) && !isEmpty) {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Line, {
+            className: "w-rjv-wrap",
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(RooNode, (0, _objectSpread2["default"])({
               keyid: keyid + subkeyid + key,
               value: item,
@@ -266,7 +333,6 @@ function RooNode(props) {
           return;
         }
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.ValueView, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, valueViewProps), {}, {
-          renderBraces: components.braces,
           renderKey: renderKey,
           keyName: key,
           value: item

package/cjs/theme/dark.d.ts

@@ -5,6 +5,7 @@ export declare const darkTheme: {
     '--w-rjv-line-color': string;
     '--w-rjv-arrow-color': string;
     '--w-rjv-info-color': string;
+    '--w-rjv-update-color': string;
     '--w-rjv-copied-color': string;
     '--w-rjv-copied-success-color': string;
     '--w-rjv-curlybraces-color': string;

package/cjs/theme/dark.js

@@ -11,6 +11,7 @@ var darkTheme = {
   '--w-rjv-line-color': '#323232',
   '--w-rjv-arrow-color': 'var(--w-rjv-color)',
   '--w-rjv-info-color': '#656565',
+  '--w-rjv-update-color': '#ebcb8b',
   '--w-rjv-copied-color': '#0184a6',
   '--w-rjv-copied-success-color': '#28a745',
   '--w-rjv-curlybraces-color': '#1896b6',

package/cjs/theme/light.d.ts

@@ -5,6 +5,7 @@ export declare const lightTheme: {
     '--w-rjv-line-color': string;
     '--w-rjv-arrow-color': string;
     '--w-rjv-info-color': string;
+    '--w-rjv-update-color': string;
     '--w-rjv-copied-color': string;
     '--w-rjv-copied-success-color': string;
     '--w-rjv-curlybraces-color': string;

package/cjs/theme/light.js

@@ -11,6 +11,7 @@ var lightTheme = {
   '--w-rjv-line-color': '#ebebeb',
   '--w-rjv-arrow-color': 'var(--w-rjv-color)',
   '--w-rjv-info-color': '#0000004d',
+  '--w-rjv-update-color': '#ebcb8b',
   '--w-rjv-copied-color': '#002b36',
   '--w-rjv-copied-success-color': '#28a745',
   '--w-rjv-curlybraces-color': '#236a7c',

package/cjs/value.d.ts

@@ -60,7 +60,7 @@ export interface LabelProps extends React.HTMLAttributes<HTMLSpanElement> {
     opacity?: number;
     paddingRight?: number;
 }
-export declare const Label: FC<PropsWithChildren<LabelProps>>;
+export declare const Label: import("react").ForwardRefExoticComponent<LabelProps & import("react").RefAttributes<HTMLSpanElement>>;
 export interface TypeProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
     type: keyof typeof typeMap;
 }

package/cjs/value.js

@@ -142,7 +142,12 @@ function ValueView(props) {
     show: showTools,
     text: value
   }) : undefined;
-  var eventProps = {};
+  var eventProps = {
+    className: 'w-rjv-line',
+    style: {
+      paddingLeft: indentWidth
+    }
+  };
   if (enableClipboard) {
     eventProps.onMouseEnter = function () {
       return setShowTools(true);
@@ -167,12 +172,9 @@ function ValueView(props) {
       className: "w-rjv-value",
       children: content
     });
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
-      style: {
-        paddingLeft: indentWidth
-      }
-    }, eventProps), {}, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, eventProps), {}, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Label, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+        ref: null,
         children: [renderKey, /*#__PURE__*/(0, _jsxRuntime.jsx)(Colon, {}), typeView, valueView, tools]
       }))
     }));
@@ -190,17 +192,14 @@ function ValueView(props) {
       children: [length, " items"]
     })]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
-    style: {
-      paddingLeft: indentWidth
-    }
-  }, eventProps), {}, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, eventProps), {}, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Label, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+      ref: null,
       children: [renderKey, /*#__PURE__*/(0, _jsxRuntime.jsx)(Colon, {}), typeView, empty, tools]
     }))
   }));
 }
-var Label = function Label(_ref2) {
+var Label = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
   var children = _ref2.children,
     color = _ref2.color,
     fontSize = _ref2.fontSize,
@@ -216,9 +215,10 @@ var Label = function Label(_ref2) {
       paddingRight: paddingRight
     }, style)
   }, reset), {}, {
+    ref: ref,
     children: children
   }));
-};
+});
 exports.Label = Label;
 var Type = function Type(props) {
   var _typeMap$type2, _typeMap$type3;

package/esm/copied.d.ts

@@ -2,6 +2,7 @@
 export interface CopiedProps<T = object> extends React.SVGProps<SVGSVGElement> {
     show?: boolean;
     text?: T;
+    onCopied?: (text: string, obj: T | '') => void;
     render?: (props: Omit<CopiedProps<T>, 'render'>) => JSX.Element;
 }
 export declare function Copied<T>(props: CopiedProps<T>): JSX.Element | null;

package/esm/copied.js

@@ -1,12 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["children", "style", "text", "render", "show"];
+var _excluded = ["children", "style", "text", "onCopied", "render", "show"];
 import { useState } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 export function Copied(props) {
   var {
       style,
       text = '',
+      onCopied,
       render,
       show
     } = props,
@@ -15,7 +16,7 @@ export function Copied(props) {
   var [copied, setCopied] = useState(false);
   var click = event => {
     event.stopPropagation();
-    var copyText = JSON.stringify(text, (key, value) => {
+    var copyText = JSON.stringify(text || '', (key, value) => {
       if (typeof value === 'bigint') {
         return value.toString();
       }
@@ -23,6 +24,7 @@ export function Copied(props) {
     }, 2);
     if (text === Infinity) copyText = Infinity;
     navigator.clipboard.writeText(copyText).then(() => {
+      onCopied && onCopied(copyText, text);
       setCopied(true);
       var timer = setTimeout(() => {
         setCopied(false);

package/esm/index.d.ts

@@ -17,6 +17,8 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
     keyName?: string | number;
     /** The user can copy objects and arrays to clipboard by clicking on the clipboard icon. @default true */
     enableClipboard?: boolean;
+    /** Whether to highlight updates. @default true */
+    highlightUpdates?: boolean;
     /** Display for quotes in object-key @default " */
     quotes?: "'" | '"' | '';
     /** When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. @default false */
@@ -28,6 +30,8 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
         keyid: string;
         keyName?: string | number;
     }) => void;
+    /** Fires event when you copy */
+    onCopied?: CopiedProps<T>['onCopied'];
     /** Redefine interface elements to re-render. */
     components?: {
         braces?: MetaProps['render'];

package/esm/node.d.ts

@@ -6,6 +6,7 @@ export interface MetaProps extends LabelProps {
     start?: boolean;
     render?: (props: Pick<MetaProps, 'start' | 'isArray' | 'className' | 'children'>) => JSX.Element;
 }
+export declare function usePrevious<T>(value: T): T | undefined;
 export declare function Meta(props: MetaProps): JSX.Element;
 export interface EllipsisProps extends React.HTMLAttributes<HTMLSpanElement> {
     render?: (props: EllipsisProps) => JSX.Element;
@@ -13,6 +14,7 @@ export interface EllipsisProps extends React.HTMLAttributes<HTMLSpanElement> {
 export declare const Ellipsis: FC<PropsWithChildren<EllipsisProps>>;
 export interface SemicolonProps extends LabelProps {
     show?: boolean;
+    highlightUpdates?: boolean;
     quotes?: JsonViewProps<object>['quotes'];
     value?: object;
     render?: (props: Omit<SemicolonProps, 'show'> & {}) => JSX.Element;

package/esm/node.js

@@ -2,15 +2,22 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["isArray", "start", "className", "render"],
   _excluded2 = ["style", "render"],
-  _excluded3 = ["children", "render", "color", "value", "className", "show", "quotes"],
-  _excluded4 = ["value", "keyName", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "indentWidth", "collapsed", "level", "keyid", "quotes", "onExpand"];
-import { Fragment, useId, cloneElement, useState } from 'react';
+  _excluded3 = ["children", "render", "color", "value", "className", "show", "highlightUpdates", "quotes"],
+  _excluded4 = ["value", "keyName", "className", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "highlightUpdates", "indentWidth", "collapsed", "level", "keyid", "quotes", "onCopied", "onExpand"];
+import { Fragment, useId, cloneElement, useState, useMemo, useRef, useEffect } from 'react';
 import { ValueView, Colon, Label, Line, typeMap } from './value';
 import { TriangleArrow } from './arrow/TriangleArrow';
 import { useExpandsStatus, store } from './store';
 import { Copied } from './copied';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+export function usePrevious(value) {
+  var ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}
 export function Meta(props) {
   var {
       isArray = false,
@@ -67,9 +74,51 @@ export var Semicolon = _ref2 => {
       value,
       className = 'w-rjv-object-key',
       show,
+      highlightUpdates,
       quotes
     } = _ref2,
     props = _objectWithoutPropertiesLoose(_ref2, _excluded3);
+  var prevValue = usePrevious(value);
+  var highlightContainer = useRef(null);
+  var isHighlight = useMemo(() => {
+    if (!highlightUpdates || prevValue === undefined) return false;
+    // highlight if value type changed
+    if (typeof value !== typeof prevValue) {
+      return true;
+    }
+    if (typeof value === 'number') {
+      // notice: NaN !== NaN
+      if (isNaN(value) && isNaN(prevValue)) return false;
+      return value !== prevValue;
+    }
+    // highlight if isArray changed
+    if (Array.isArray(value) !== Array.isArray(prevValue)) {
+      return true;
+    }
+    // not highlight object/function
+    // deep compare they will be slow
+    if (typeof value === 'object' || typeof value === 'function') {
+      return false;
+    }
+
+    // highlight if not equal
+    if (value !== prevValue) {
+      return true;
+    }
+    return false;
+  }, [highlightUpdates, value]);
+  useEffect(() => {
+    if (highlightContainer.current && isHighlight && 'animate' in highlightContainer.current) {
+      highlightContainer.current.animate([{
+        backgroundColor: 'var(--w-rjv-update-color, #ebcb8b)'
+      }, {
+        backgroundColor: ''
+      }], {
+        duration: 1000,
+        easing: 'ease-in'
+      });
+    }
+  }, [isHighlight, value]);
   var content = show ? "" + quotes + children + quotes : children;
   if (render) return render(_extends({
     className
@@ -84,6 +133,7 @@ export var Semicolon = _ref2 => {
     className: className,
     color: color
   }, props, {
+    ref: highlightContainer,
     children: content
   }));
 };
@@ -97,7 +147,7 @@ export var CountInfo = _ref3 => {
       fontStyle: 'italic'
     },
     color: "var(--w-rjv-info-color, #0000004d)",
-    className: "object-size",
+    className: "w-rjv-object-size",
     children: children
   });
 };
@@ -106,15 +156,18 @@ export function RooNode(props) {
   var {
       value = {},
       keyName,
+      className,
       displayDataTypes = true,
       components = {},
       displayObjectSize = true,
       enableClipboard = true,
+      highlightUpdates = true,
       indentWidth = 15,
       collapsed,
       level = 1,
       keyid = 'root',
       quotes = '"',
+      onCopied,
       onExpand
     } = props,
     reset = _objectWithoutPropertiesLoose(props, _excluded4);
@@ -142,6 +195,8 @@ export function RooNode(props) {
     displayDataTypes,
     displayObjectSize,
     enableClipboard,
+    highlightUpdates,
+    onCopied,
     onExpand,
     collapsed,
     quotes,
@@ -155,18 +210,22 @@ export function RooNode(props) {
     displayObjectSize,
     enableClipboard,
     indentWidth,
+    renderBraces: components.braces,
     renderValue: components.value
   };
   var arrowView = components.arrow ? /*#__PURE__*/cloneElement(components.arrow, {
     style: arrowStyle,
-    'data-expand': expand
+    'data-expand': expand,
+    className: "w-rjv-arrow"
   }) : /*#__PURE__*/_jsx(TriangleArrow, {
-    style: arrowStyle
+    style: arrowStyle,
+    className: "w-rjv-arrow"
   });
   var [showTools, setShowTools] = useState(false);
   var tools = enableClipboard ? /*#__PURE__*/_jsx(Copied, {
     show: showTools,
     text: value,
+    onCopied: onCopied,
     render: components.copied
   }) : undefined;
   var eventProps = {};
@@ -174,7 +233,9 @@ export function RooNode(props) {
     eventProps.onMouseEnter = () => setShowTools(true);
     eventProps.onMouseLeave = () => setShowTools(false);
   }
-  return /*#__PURE__*/_jsxs("div", _extends({}, reset, eventProps, {
+  return /*#__PURE__*/_jsxs("div", _extends({}, reset, {
+    className: className + " w-rjv-inner"
+  }, eventProps, {
     children: [/*#__PURE__*/_jsxs(Line, {
       style: {
         display: 'inline-flex',
@@ -203,6 +264,7 @@ export function RooNode(props) {
         children: [nameKeys.length, " items"]
       }), tools]
     }), expand && /*#__PURE__*/_jsx(Line, {
+      className: "w-rjv-content",
       style: {
         borderLeft: 'var(--w-rjv-border-left-width, 1px) solid var(--w-rjv-line-color, #ebebeb)',
         marginLeft: 6
@@ -212,6 +274,7 @@ export function RooNode(props) {
         var renderKey = /*#__PURE__*/_jsx(Semicolon, {
           value: item,
           quotes: quotes,
+          highlightUpdates: highlightUpdates,
           render: components.objectKey,
           color: typeof key === 'number' ? typeMap['number'].color : '',
           show: typeof key === 'string',
@@ -221,6 +284,7 @@ export function RooNode(props) {
         if (Array.isArray(item) && !isEmpty) {
           var label = isArray ? idx : key;
           return /*#__PURE__*/_jsx(Line, {
+            className: "w-rjv-wrap",
             children: /*#__PURE__*/_jsx(RooNode, _extends({
               value: item,
               keyid: keyid + subkeyid + label,
@@ -230,6 +294,7 @@ export function RooNode(props) {
         }
         if (typeof item === 'object' && item && !(item instanceof Date) && !isEmpty) {
           return /*#__PURE__*/_jsx(Line, {
+            className: "w-rjv-wrap",
             children: /*#__PURE__*/_jsx(RooNode, _extends({
               keyid: keyid + subkeyid + key,
               value: item,
@@ -241,7 +306,6 @@ export function RooNode(props) {
           return;
         }
         return /*#__PURE__*/_jsx(ValueView, _extends({}, valueViewProps, {
-          renderBraces: components.braces,
           renderKey: renderKey,
           keyName: key,
           value: item

package/esm/theme/dark.d.ts

@@ -5,6 +5,7 @@ export declare const darkTheme: {
     '--w-rjv-line-color': string;
     '--w-rjv-arrow-color': string;
     '--w-rjv-info-color': string;
+    '--w-rjv-update-color': string;
     '--w-rjv-copied-color': string;
     '--w-rjv-copied-success-color': string;
     '--w-rjv-curlybraces-color': string;

package/esm/theme/dark.js

@@ -5,6 +5,7 @@ export var darkTheme = {
   '--w-rjv-line-color': '#323232',
   '--w-rjv-arrow-color': 'var(--w-rjv-color)',
   '--w-rjv-info-color': '#656565',
+  '--w-rjv-update-color': '#ebcb8b',
   '--w-rjv-copied-color': '#0184a6',
   '--w-rjv-copied-success-color': '#28a745',
   '--w-rjv-curlybraces-color': '#1896b6',

package/esm/theme/light.d.ts

@@ -5,6 +5,7 @@ export declare const lightTheme: {
     '--w-rjv-line-color': string;
     '--w-rjv-arrow-color': string;
     '--w-rjv-info-color': string;
+    '--w-rjv-update-color': string;
     '--w-rjv-copied-color': string;
     '--w-rjv-copied-success-color': string;
     '--w-rjv-curlybraces-color': string;

package/esm/theme/light.js

@@ -5,6 +5,7 @@ export var lightTheme = {
   '--w-rjv-line-color': '#ebebeb',
   '--w-rjv-arrow-color': 'var(--w-rjv-color)',
   '--w-rjv-info-color': '#0000004d',
+  '--w-rjv-update-color': '#ebcb8b',
   '--w-rjv-copied-color': '#002b36',
   '--w-rjv-copied-success-color': '#28a745',
   '--w-rjv-curlybraces-color': '#236a7c',

package/esm/value.d.ts

@@ -60,7 +60,7 @@ export interface LabelProps extends React.HTMLAttributes<HTMLSpanElement> {
     opacity?: number;
     paddingRight?: number;
 }
-export declare const Label: FC<PropsWithChildren<LabelProps>>;
+export declare const Label: import("react").ForwardRefExoticComponent<LabelProps & import("react").RefAttributes<HTMLSpanElement>>;
 export interface TypeProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
     type: keyof typeof typeMap;
 }

package/esm/value.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 var _excluded = ["children", "style"],
   _excluded2 = ["value", "keyName", "indentWidth", "renderKey", "renderValue", "renderBraces", "enableClipboard", "displayObjectSize", "displayDataTypes"],
   _excluded3 = ["children", "color", "fontSize", "opacity", "paddingRight", "style"];
-import { Fragment, useState } from 'react';
+import { Fragment, forwardRef, useState } from 'react';
 import { Meta, CountInfo } from './node';
 import { Copied } from './copied';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -124,7 +124,12 @@ export function ValueView(props) {
     show: showTools,
     text: value
   }) : undefined;
-  var eventProps = {};
+  var eventProps = {
+    className: 'w-rjv-line',
+    style: {
+      paddingLeft: indentWidth
+    }
+  };
   if (enableClipboard) {
     eventProps.onMouseEnter = () => setShowTools(true);
     eventProps.onMouseLeave = () => setShowTools(false);
@@ -145,12 +150,9 @@ export function ValueView(props) {
       className: "w-rjv-value",
       children: content
     });
-    return /*#__PURE__*/_jsx(Line, _extends({
-      style: {
-        paddingLeft: indentWidth
-      }
-    }, eventProps, {
+    return /*#__PURE__*/_jsx(Line, _extends({}, eventProps, {
       children: /*#__PURE__*/_jsxs(Label, _extends({}, reset, {
+        ref: null,
         children: [renderKey, /*#__PURE__*/_jsx(Colon, {}), typeView, valueView, tools]
       }))
     }));
@@ -168,17 +170,14 @@ export function ValueView(props) {
       children: [length, " items"]
     })]
   });
-  return /*#__PURE__*/_jsx(Line, _extends({
-    style: {
-      paddingLeft: indentWidth
-    }
-  }, eventProps, {
+  return /*#__PURE__*/_jsx(Line, _extends({}, eventProps, {
     children: /*#__PURE__*/_jsxs(Label, _extends({}, reset, {
+      ref: null,
       children: [renderKey, /*#__PURE__*/_jsx(Colon, {}), typeView, empty, tools]
     }))
   }));
 }
-export var Label = _ref2 => {
+export var Label = /*#__PURE__*/forwardRef((_ref2, ref) => {
   var {
       children,
       color,
@@ -196,9 +195,10 @@ export var Label = _ref2 => {
       paddingRight
     }, style)
   }, reset, {
+    ref: ref,
     children: children
   }));
-};
+});
 export var Type = props => {
   var _typeMap$type2, _typeMap$type3;
   var {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-json-view",
-  "version": "1.1.1",
+  "version": "1.3.0",
   "description": "JSON viewer for react.",
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -74,7 +74,10 @@
     "treeview"
   ],
   "devDependencies": {
+    "@testing-library/react": "^14.0.0",
+    "@types/react-test-renderer": "^18.0.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0"
   }
 }