From 108e1a8d406c3420ebc938fb1c6258feab5a928d Mon Sep 17 00:00:00 2001
From: n1c0de <58054442+n1c0de@users.noreply.github.com>
Date: Mon, 26 May 2025 11:53:29 +0200
Subject: [PATCH 1/5] fix: use className instead of class in React components
 (#1)

---
 docs/src/js/components/Demo.js                | 54 +++++++++----------
 docs/src/js/entry.js                          |  2 +-
 docs/src/js/index.js                          |  2 +-
 src/js/components/ArrayGroup.js               | 12 ++---
 src/js/components/CopyToClipboard.js          |  4 +-
 src/js/components/DataTypes/DataTypeLabel.js  |  2 +-
 src/js/components/DataTypes/Date.js           |  2 +-
 src/js/components/DataTypes/Function.js       |  4 +-
 src/js/components/DataTypes/Object.js         | 12 ++---
 src/js/components/DataTypes/String.js         |  2 +-
 src/js/components/JsonViewer.js               |  4 +-
 .../ObjectKeyModal/ObjectKeyModal.js          |  8 +--
 src/js/components/ObjectName.js               |  4 +-
 src/js/components/ToggleIcons.js              | 12 ++---
 src/js/components/ValidationFailure.js        |  2 +-
 src/js/components/VariableEditor.js           | 24 ++++-----
 src/js/components/VariableMeta.js             | 12 ++---
 src/js/index.js                               |  2 +-
 18 files changed, 82 insertions(+), 82 deletions(-)

diff --git a/docs/src/js/components/Demo.js b/docs/src/js/components/Demo.js
index 7ba5dac..8fa9edd 100644
--- a/docs/src/js/components/Demo.js
+++ b/docs/src/js/components/Demo.js
@@ -175,9 +175,9 @@ class Demo extends React.PureComponent {
         `}
           </style>
         )}
-        <div class='rjv-demo'>
-          <div class='rjv-header'>
-            <div class='header-1'>@microlink/react-json-view</div>
+        <div className='rjv-demo'>
+          <div className='rjv-header'>
+            <div className='header-1'>@microlink/react-json-view</div>
           </div>
           <ReactJson
             name={false}
@@ -217,52 +217,52 @@ class Demo extends React.PureComponent {
             iconStyle={iconStyle}
           />
 
-          <div class='rjv-settings'>
-            <div class='rjv-input'>
-              <div class='rjv-label'>Theme:</div>
+          <div className='rjv-settings'>
+            <div className='rjv-input'>
+              <div className='rjv-label'>Theme:</div>
               {this.getThemeInput(theme)}
             </div>
-            <div class='rjv-input'>
-              <div class='rjv-label'>Icon Style:</div>
+            <div className='rjv-input'>
+              <div className='rjv-label'>Icon Style:</div>
               {this.getIconStyleInput(iconStyle)}
             </div>
-            <div class='rjv-input'>
-              <div class='rjv-label'>Enable Edit:</div>
+            <div className='rjv-input'>
+              <div className='rjv-label'>Enable Edit:</div>
               {this.getEditInput(onEdit)}
             </div>
-            <div class='rjv-input'>
-              <div class='rjv-label'>Enable Add:</div>
+            <div className='rjv-input'>
+              <div className='rjv-label'>Enable Add:</div>
               {this.getAddInput(onAdd)}
             </div>
-            <div class='rjv-input'>
-              <div class='rjv-label'>Enable Delete:</div>
+            <div className='rjv-input'>
+              <div className='rjv-label'>Enable Delete:</div>
               {this.getDeleteInput(onDelete)}
             </div>
-            <div class='rjv-input'>
-              <div class='rjv-label'>Enable Clipboard:</div>
+            <div className='rjv-input'>
+              <div className='rjv-label'>Enable Clipboard:</div>
               {this.getEnableClipboardInput(enableClipboard)}
             </div>
           </div>
 
-          <div class='rjv-settings'>
-            <div class='rjv-input'>
-              <div class='rjv-label'>Display Data Types:</div>
+          <div className='rjv-settings'>
+            <div className='rjv-input'>
+              <div className='rjv-label'>Display Data Types:</div>
               {this.getDataTypesInput(displayDataTypes)}
             </div>
-            <div class='rjv-input'>
-              <div class='rjv-label'>Display Object Size:</div>
+            <div className='rjv-input'>
+              <div className='rjv-label'>Display Object Size:</div>
               {this.getObjectSizeInput(displayObjectSize)}
             </div>
-            <div class='rjv-input'>
-              <div class='rjv-label'>Indent Width:</div>
+            <div className='rjv-input'>
+              <div className='rjv-label'>Indent Width:</div>
               {this.getIndentWidthInput(indentWidth)}
             </div>
-            <div class='rjv-input'>
-              <div class='rjv-label'>Collapsed:</div>
+            <div className='rjv-input'>
+              <div className='rjv-label'>Collapsed:</div>
               {this.getCollapsedInput(collapsed)}
             </div>
-            <div class='rjv-input'>
-              <div class='rjv-label'>Collapse Strings After Length:</div>
+            <div className='rjv-input'>
+              <div className='rjv-label'>Collapse Strings After Length:</div>
               {this.getCollapsedStringsInput(collapseStringsAfter)}
             </div>
           </div>
diff --git a/docs/src/js/entry.js b/docs/src/js/entry.js
index 883f8dc..59dd2e9 100644
--- a/docs/src/js/entry.js
+++ b/docs/src/js/entry.js
@@ -7,7 +7,7 @@ const app = document.getElementById('mac-react-container')
 
 //app entrypoint
 ReactDom.render(
-  <div class='app-entry'>
+  <div className='app-entry'>
     <Index />
   </div>,
   app
diff --git a/docs/src/js/index.js b/docs/src/js/index.js
index 30eb746..8d473b5 100644
--- a/docs/src/js/index.js
+++ b/docs/src/js/index.js
@@ -4,7 +4,7 @@ import ReactJsonDemo from './components/Demo'
 // index entrypoint component
 export default function Demo () {
   return (
-    <div class='mac-react'>
+    <div className='mac-react'>
       <ReactJsonDemo />
     </div>
   )
diff --git a/src/js/components/ArrayGroup.js b/src/js/components/ArrayGroup.js
index 1d9b228..55d6122 100644
--- a/src/js/components/ArrayGroup.js
+++ b/src/js/components/ArrayGroup.js
@@ -66,7 +66,7 @@ export default class extends React.PureComponent {
 
     return (
       <div
-        class='object-key-val'
+        className='object-key-val'
         {...Theme(theme, jsvRoot ? 'jsv-root' : 'objectKeyVal', {
           paddingLeft: object_padding_left
         })}
@@ -79,7 +79,7 @@ export default class extends React.PureComponent {
         {[...Array(groups)].map((_, i) => (
           <div
             key={i}
-            class='object-key-val array-group'
+            className='object-key-val array-group'
             {...Theme(theme, 'objectKeyVal', {
               marginLeft: 6,
               paddingLeft: array_group_padding_left
@@ -87,7 +87,7 @@ export default class extends React.PureComponent {
           >
             <span {...Theme(theme, 'brace-row')}>
               <div
-                class='icon-container'
+                className='icon-container'
                 {...Theme(theme, 'icon-container')}
                 onClick={e => {
                   this.toggleCollapsed(i)
@@ -118,14 +118,14 @@ export default class extends React.PureComponent {
                     onClick={e => {
                       this.toggleCollapsed(i)
                     }}
-                    class='array-group-brace'
+                    className='array-group-brace'
                   >
                     [
                     <div
                       {...Theme(theme, 'array-group-meta-data')}
-                      class='array-group-meta-data'
+                      className='array-group-meta-data'
                     >
-                      <span class='object-size' {...Theme(theme, 'object-size')}>
+                      <span className='object-size' {...Theme(theme, 'object-size')}>
                         {i * size}
                         {' - '}
                         {i * size + size > src.length
diff --git a/src/js/components/CopyToClipboard.js b/src/js/components/CopyToClipboard.js
index 34cabaa..1da352c 100644
--- a/src/js/components/CopyToClipboard.js
+++ b/src/js/components/CopyToClipboard.js
@@ -74,13 +74,13 @@ export default class extends React.PureComponent {
     if (this.state.copied) {
       return (
         <span>
-          <Clippy class='copy-icon' {...Theme(theme, 'copy-icon')} />
+          <Clippy className='copy-icon' {...Theme(theme, 'copy-icon')} />
           <span {...Theme(theme, 'copy-icon-copied')}>✔</span>
         </span>
       )
     }
 
-    return <Clippy class='copy-icon' {...Theme(theme, 'copy-icon')} />
+    return <Clippy className='copy-icon' {...Theme(theme, 'copy-icon')} />
   }
 
   clipboardValue = value => {
diff --git a/src/js/components/DataTypes/DataTypeLabel.js b/src/js/components/DataTypes/DataTypeLabel.js
index 001f3e7..e8ee9da 100644
--- a/src/js/components/DataTypes/DataTypeLabel.js
+++ b/src/js/components/DataTypes/DataTypeLabel.js
@@ -8,7 +8,7 @@ export default class extends React.PureComponent {
     const { rjvId, type_name, displayDataTypes, theme } = this.props
     if (displayDataTypes) {
       return (
-        <span class='data-type-label' {...Theme(theme, 'data-type-label')}>
+        <span className='data-type-label' {...Theme(theme, 'data-type-label')}>
           {type_name}
         </span>
       )
diff --git a/src/js/components/DataTypes/Date.js b/src/js/components/DataTypes/Date.js
index bf10c1a..518bcc8 100644
--- a/src/js/components/DataTypes/Date.js
+++ b/src/js/components/DataTypes/Date.js
@@ -19,7 +19,7 @@ export default class extends React.PureComponent {
     return (
       <div {...Theme(props.theme, 'date')}>
         <DataTypeLabel type_name={type_name} {...props} />
-        <span class='date-value' {...Theme(props.theme, 'date-value')}>
+        <span className='date-value' {...Theme(props.theme, 'date-value')}>
           {props.value.toLocaleTimeString('en-us', display_options)}
         </span>
       </div>
diff --git a/src/js/components/DataTypes/Function.js b/src/js/components/DataTypes/Function.js
index 39290de..2e6c254 100644
--- a/src/js/components/DataTypes/Function.js
+++ b/src/js/components/DataTypes/Function.js
@@ -47,7 +47,7 @@ export default class extends React.PureComponent {
         <DataTypeLabel type_name={type_name} {...props} />
         <span
           {...Theme(props.theme, 'function-value')}
-          class='rjv-function-container'
+          className='rjv-function-container'
           onClick={this.toggleCollapsed}
         >
           {this.getFunctionDisplay(collapsed)}
@@ -65,7 +65,7 @@ export default class extends React.PureComponent {
             .toString()
             .slice(9, -1)
             .replace(/\{[\s\S]+/, '')}
-          <span class='function-collapsed' style={{ fontWeight: 'bold' }}>
+          <span className='function-collapsed' style={{ fontWeight: 'bold' }}>
             <span>{'{'}</span>
             <span {...Theme(props.theme, 'ellipsis')}>...</span>
             <span>{'}'}</span>
diff --git a/src/js/components/DataTypes/Object.js b/src/js/components/DataTypes/Object.js
index 4d37bff..a7a0605 100644
--- a/src/js/components/DataTypes/Object.js
+++ b/src/js/components/DataTypes/Object.js
@@ -99,9 +99,9 @@ class RjvObject extends React.PureComponent {
 
   getObjectContent = (depth, src, props) => {
     return (
-      <div class='pushed-content object-container'>
+      <div className='pushed-content object-container'>
         <div
-          class='object-content'
+          className='object-content'
           {...Theme(this.props.theme, 'pushed-content')}
         >
           {this.renderObjectContents(src, props)}
@@ -120,7 +120,7 @@ class RjvObject extends React.PureComponent {
       return (
         <div
           {...Theme(this.props.theme, 'ellipsis')}
-          class='node-ellipsis'
+          className='node-ellipsis'
           onClick={this.toggleCollapsed}
         >
           ...
@@ -159,7 +159,7 @@ class RjvObject extends React.PureComponent {
           }}
           {...Theme(theme, 'brace-row')}
         >
-          <div class='icon-container' {...Theme(theme, 'icon-container')}>
+          <div className='icon-container' {...Theme(theme, 'icon-container')}>
             <IconComponent {...{ theme, iconStyle }} />
           </div>
           <ObjectName {...this.props} />
@@ -200,7 +200,7 @@ class RjvObject extends React.PureComponent {
 
     return (
       <div
-        class='object-key-val'
+        className='object-key-val'
         onMouseEnter={() => this.setState({ ...this.state, hovered: true })}
         onMouseLeave={() => this.setState({ ...this.state, hovered: false })}
         {...Theme(theme, jsvRoot ? 'jsv-root' : 'objectKeyVal', styles)}
@@ -213,7 +213,7 @@ class RjvObject extends React.PureComponent {
             ...rest
           })
           : this.getEllipsis()}
-        <span class='brace-row'>
+        <span className='brace-row'>
           <span
             style={{
               ...Theme(theme, 'brace').style,
diff --git a/src/js/components/DataTypes/String.js b/src/js/components/DataTypes/String.js
index 20c692c..d4ad92c 100644
--- a/src/js/components/DataTypes/String.js
+++ b/src/js/components/DataTypes/String.js
@@ -65,7 +65,7 @@ export default class extends React.PureComponent {
     return (
       <div {...Theme(theme, 'string')}>
         <DataTypeLabel type_name={type_name} {...props} />
-        <span class='string-value' {...style} onClick={this.toggleCollapsed}>
+        <span className='string-value' {...style} onClick={this.toggleCollapsed}>
           "{value}"
         </span>
       </div>
diff --git a/src/js/components/JsonViewer.js b/src/js/components/JsonViewer.js
index ab0df68..41f4b88 100644
--- a/src/js/components/JsonViewer.js
+++ b/src/js/components/JsonViewer.js
@@ -23,8 +23,8 @@ export default class extends React.PureComponent {
     }
 
     return (
-      <div class='pretty-json-container object-container'>
-        <div class='object-content'>
+      <div className='pretty-json-container object-container'>
+        <div className='object-content'>
           <ObjectComponent namespace={namespace} depth={0} jsvRoot {...props} />
         </div>
       </div>
diff --git a/src/js/components/ObjectKeyModal/ObjectKeyModal.js b/src/js/components/ObjectKeyModal/ObjectKeyModal.js
index f340e7c..0856e2a 100644
--- a/src/js/components/ObjectKeyModal/ObjectKeyModal.js
+++ b/src/js/components/ObjectKeyModal/ObjectKeyModal.js
@@ -23,7 +23,7 @@ export default class extends React.PureComponent {
 
     return (
       <div
-        class='key-modal-request'
+        className='key-modal-request'
         {...Theme(theme, 'key-modal-request')}
         onClick={this.closeModal}
       >
@@ -37,7 +37,7 @@ export default class extends React.PureComponent {
           <div style={{ position: 'relative' }}>
             <input
               {...Theme(theme, 'key-modal-input')}
-              class='key-modal-input'
+              className='key-modal-input'
               ref={el => el && el.focus()}
               spellCheck={false}
               value={input}
@@ -59,7 +59,7 @@ export default class extends React.PureComponent {
               ? (
                 <CheckCircle
                   {...Theme(theme, 'key-modal-submit')}
-                  class='key-modal-submit'
+                  className='key-modal-submit'
                   onClick={e => this.submit()}
                 />
                 )
@@ -68,7 +68,7 @@ export default class extends React.PureComponent {
           <span {...Theme(theme, 'key-modal-cancel')}>
             <Cancel
               {...Theme(theme, 'key-modal-cancel-icon')}
-              class='key-modal-cancel'
+              className='key-modal-cancel'
               onClick={() => {
                 dispatcher.dispatch({
                   rjvId,
diff --git a/src/js/components/ObjectName.js b/src/js/components/ObjectName.js
index 301d6f7..576b4bb 100644
--- a/src/js/components/ObjectName.js
+++ b/src/js/components/ObjectName.js
@@ -20,7 +20,7 @@ export default function getObjectName (props) {
     return displayArrayKey
       ? (
         <span {...Theme(theme, 'array-key')} key={namespace}>
-          <span class='array-key'>{display_name}</span>
+          <span className='array-key'>{display_name}</span>
           <span {...Theme(theme, 'colon')}>:</span>
         </span>
         )
@@ -30,7 +30,7 @@ export default function getObjectName (props) {
   } else {
     return (
       <span {...Theme(theme, 'object-name')} key={namespace}>
-        <span class='object-key'>
+        <span className='object-key'>
           {quotesOnKeys && <span style={{ verticalAlign: 'top' }}>"</span>}
           <span>{display_name}</span>
           {quotesOnKeys && <span style={{ verticalAlign: 'top' }}>"</span>}
diff --git a/src/js/components/ToggleIcons.js b/src/js/components/ToggleIcons.js
index 9ded049..9cad80f 100644
--- a/src/js/components/ToggleIcons.js
+++ b/src/js/components/ToggleIcons.js
@@ -15,15 +15,15 @@ export function ExpandedIcon (props) {
   switch (iconStyle) {
     case 'triangle':
       return (
-        <ArrowDown {...Theme(theme, 'expanded-icon')} class='expanded-icon' />
+        <ArrowDown {...Theme(theme, 'expanded-icon')} className='expanded-icon' />
       )
     case 'square':
       return (
-        <SquareMinus {...Theme(theme, 'expanded-icon')} class='expanded-icon' />
+        <SquareMinus {...Theme(theme, 'expanded-icon')} className='expanded-icon' />
       )
     default:
       return (
-        <CircleMinus {...Theme(theme, 'expanded-icon')} class='expanded-icon' />
+        <CircleMinus {...Theme(theme, 'expanded-icon')} className='expanded-icon' />
       )
   }
 }
@@ -35,21 +35,21 @@ export function CollapsedIcon (props) {
       return (
         <ArrowRight
           {...Theme(theme, 'collapsed-icon')}
-          class='collapsed-icon'
+          className='collapsed-icon'
         />
       )
     case 'square':
       return (
         <SquarePlus
           {...Theme(theme, 'collapsed-icon')}
-          class='collapsed-icon'
+          className='collapsed-icon'
         />
       )
     default:
       return (
         <CirclePlus
           {...Theme(theme, 'collapsed-icon')}
-          class='collapsed-icon'
+          className='collapsed-icon'
         />
       )
   }
diff --git a/src/js/components/ValidationFailure.js b/src/js/components/ValidationFailure.js
index d4537ae..a707a66 100644
--- a/src/js/components/ValidationFailure.js
+++ b/src/js/components/ValidationFailure.js
@@ -15,7 +15,7 @@ export default class extends React.PureComponent {
     return active
       ? (
         <div
-          class='validation-failure'
+          className='validation-failure'
           {...Theme(theme, 'validation-failure')}
           onClick={() => {
             dispatcher.dispatch({
diff --git a/src/js/components/VariableEditor.js b/src/js/components/VariableEditor.js
index c707532..d0bcb32 100644
--- a/src/js/components/VariableEditor.js
+++ b/src/js/components/VariableEditor.js
@@ -67,7 +67,7 @@ class VariableEditor extends React.PureComponent {
         })}
         onMouseEnter={() => this.setState({ ...this.state, hovered: true })}
         onMouseLeave={() => this.setState({ ...this.state, hovered: false })}
-        class='variable-row'
+        className='variable-row'
         key={variable.name}
       >
         {type == 'array'
@@ -88,7 +88,7 @@ class VariableEditor extends React.PureComponent {
             <span>
               <span
                 {...Theme(theme, 'object-name')}
-                class='object-key'
+                className='object-key'
                 key={variable.name + '_' + namespace}
               >
                 {!!quotesOnKeys && (
@@ -103,7 +103,7 @@ class VariableEditor extends React.PureComponent {
             </span>
             )}
         <div
-          class='variable-value'
+          className='variable-value'
           onClick={
             onSelect === false && onEdit === false
               ? null
@@ -148,14 +148,14 @@ class VariableEditor extends React.PureComponent {
 
     return (
       <div
-        class='click-to-edit'
+        className='click-to-edit'
         style={{
           verticalAlign: 'top',
           display: this.state.hovered ? 'inline-block' : 'none'
         }}
       >
         <Edit
-          class='click-to-edit-icon'
+          className='click-to-edit-icon'
           {...Theme(theme, 'editVarIcon')}
           onClick={() => {
             this.prepopInput(variable)
@@ -185,14 +185,14 @@ class VariableEditor extends React.PureComponent {
 
     return (
       <div
-        class='click-to-remove'
+        className='click-to-remove'
         style={{
           verticalAlign: 'top',
           display: this.state.hovered ? 'inline-block' : 'none'
         }}
       >
         <Remove
-          class='click-to-remove-icon'
+          className='click-to-remove-icon'
           {...Theme(theme, 'removeVarIcon')}
           onClick={() => {
             dispatcher.dispatch({
@@ -241,7 +241,7 @@ class VariableEditor extends React.PureComponent {
         return <JsonBigNumber value={variable.value} {...props} />
       default:
         // catch-all for types that weren't anticipated
-        return <div class='object-value'>{JSON.stringify(variable.value)}</div>
+        return <div className='object-value'>{JSON.stringify(variable.value)}</div>
     }
   }
 
@@ -259,7 +259,7 @@ class VariableEditor extends React.PureComponent {
             }
           }}
           value={editValue}
-          class='variable-editor'
+          className='variable-editor'
           onChange={event => {
             const value = event.target.value
             const detected = parseInput(value, this.props.bigNumber)
@@ -295,7 +295,7 @@ class VariableEditor extends React.PureComponent {
         />
         <div {...Theme(theme, 'edit-icon-container')}>
           <Remove
-            class='edit-cancel'
+            className='edit-cancel'
             {...Theme(theme, 'cancel-icon')}
             onClick={e => {
               if (e) {
@@ -306,7 +306,7 @@ class VariableEditor extends React.PureComponent {
             }}
           />
           <CheckCircle
-            class='edit-check string-value'
+            className='edit-check string-value'
             {...Theme(theme, 'check-icon')}
             onClick={e => {
               if (e) {
@@ -358,7 +358,7 @@ class VariableEditor extends React.PureComponent {
           <div {...Theme(theme, 'detected-row')}>
             {detected}
             <CheckCircle
-              class='edit-check detected'
+              className='edit-check detected'
               style={{
                 verticalAlign: 'top',
                 paddingLeft: '3px',
diff --git a/src/js/components/VariableMeta.js b/src/js/components/VariableMeta.js
index 17d5e85..1da8d9d 100644
--- a/src/js/components/VariableMeta.js
+++ b/src/js/components/VariableMeta.js
@@ -15,7 +15,7 @@ export default class extends React.PureComponent {
     const { size, theme, displayObjectSize } = this.props
     if (displayObjectSize) {
       return (
-        <span class='object-size' {...Theme(theme, 'object-size')}>
+        <span className='object-size' {...Theme(theme, 'object-size')}>
           {size} item{size === 1 ? '' : 's'}
         </span>
       )
@@ -27,14 +27,14 @@ export default class extends React.PureComponent {
 
     return (
       <span
-        class='click-to-add'
+        className='click-to-add'
         style={{
           verticalAlign: 'top',
           display: rowHovered ? 'inline-block' : 'none'
         }}
       >
         <Add
-          class='click-to-add-icon'
+          className='click-to-add-icon'
           {...Theme(theme, 'addVarIcon')}
           onClick={() => {
             const request = {
@@ -75,13 +75,13 @@ export default class extends React.PureComponent {
     }
     return (
       <span
-        class='click-to-remove'
+        className='click-to-remove'
         style={{
           display: rowHovered ? 'inline-block' : 'none'
         }}
       >
         <Remove
-          class='click-to-remove-icon'
+          className='click-to-remove-icon'
           {...Theme(theme, 'removeVarIcon')}
           onClick={() => {
             dispatcher.dispatch({
@@ -113,7 +113,7 @@ export default class extends React.PureComponent {
     return (
       <div
         {...Theme(theme, 'object-meta-data')}
-        class='object-meta-data'
+        className='object-meta-data'
         onClick={e => {
           e.stopPropagation()
         }}
diff --git a/src/js/index.js b/src/js/index.js
index 538bb68..6fdeae4 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -177,7 +177,7 @@ class ReactJsonView extends React.PureComponent {
 
     return (
       <div
-        class='react-json-view'
+        className='react-json-view'
         style={{ ...Theme(theme, 'app-container').style, ...style }}
       >
         <ValidationFailure

From 4f386ddc22c9084aed624cbca8d55d8dc8fd6b79 Mon Sep 17 00:00:00 2001
From: n1c0de <58054442+n1c0de@users.noreply.github.com>
Date: Mon, 26 May 2025 14:08:58 +0200
Subject: [PATCH 2/5] Release/1.26.3 (#3)

* chore: update project version

* chore: add contributor to project
---
 CHANGELOG.md | 2 ++
 package.json | 6 +++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 19eb72d..a306f10 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [1.26.3](https://github.com/n1c0de/react-json-view/compare/v1.26.2...v1.26.3) (2025-05-26)
+
 ### [1.26.2](https://github.com/microlinkhq/react-json-view/compare/v1.26.1...v1.26.2) (2025-05-16)
 
 ### [1.26.1](https://github.com/microlinkhq/react-json-view/compare/v1.26.0...v1.26.1) (2025-02-15)
diff --git a/package.json b/package.json
index 16421bb..75f3d51 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "@microlink/react-json-view",
   "description": "Interactive react component for displaying javascript arrays and JSON objects.",
   "homepage": "https://github.com/microlinkhq/react-json-view",
-  "version": "1.26.2",
+  "version": "1.26.3",
   "main": "dist/main.js",
   "author": {
     "name": "Mac Gainor"
@@ -175,6 +175,10 @@
     {
       "name": "Mert Donmezyurek",
       "email": "info@mertdy.com"
+    },
+    {
+      "name": "n1c0de",
+      "email": "n1c0de@protonmail.com"
     }
   ],
   "repository": {

From d4f318e7419f195bf9c8a8e7f327c1f428850d65 Mon Sep 17 00:00:00 2001
From: n1c0de <nicolas.charras@elysium-security.com>
Date: Mon, 26 May 2025 13:52:13 +0200
Subject: [PATCH 3/5] feat: add custom buttons to rows according to value type

---
 dev-server/src/index.js               | 200 +++++++++++++++++++++++++-
 index.d.ts                            |  16 +++
 src/js/components/ArrayGroup.js       |   3 +-
 src/js/components/CustomButton.js     |  83 +++++++++++
 src/js/components/DataTypes/Object.js |   4 +-
 src/js/components/JsonViewer.js       |   2 +-
 src/js/components/VariableEditor.js   |  19 ++-
 src/js/components/VariableMeta.js     |  14 +-
 src/js/components/icons.js            |  51 +++++++
 src/js/themes/getStyle.js             |  10 ++
 10 files changed, 394 insertions(+), 8 deletions(-)
 create mode 100644 src/js/components/CustomButton.js

diff --git a/dev-server/src/index.js b/dev-server/src/index.js
index 229ae0e..2d5b1fa 100644
--- a/dev-server/src/index.js
+++ b/dev-server/src/index.js
@@ -137,7 +137,7 @@ ReactDom.render(
 
     <br />
 
-    {/*demo array support*/}
+    {/* demo array support */}
     <JsonViewer
       src={getExampleArray()}
       theme='solarized'
@@ -201,6 +201,172 @@ ReactDom.render(
       name='String with special escape sequences'
       src={getExampleWithStringEscapeSequences()}
     />
+
+    {/* Custom buttons according to the value type */}
+    <JsonViewer
+      bigNumber={BigNumber}
+      sortKeys
+      style={{ padding: '30px', backgroundColor: 'white' }}
+      src={getExampleJson5()}
+      quotesOnKeys={false}
+      collapseStringsAfterLength={12}
+      customButtons={{
+        boolean: {
+          clickCallback: (element) => { console.log(JSON.stringify(element, null, 4)) },
+          path: <path d="m31.7 16.4q0-0.6-0.4-1l-2.1-2.1q-0.4-0.4-1-0.4t-1 0.4l-9.1 9.1-5-5q-0.5-0.4-1-0.4t-1 0.4l-2.1 2q-0.4 0.4-0.4 1 0 0.6 0.4 1l8.1 8.1q0.4 0.4 1 0.4 0.6 0 1-0.4l12.2-12.1q0.4-0.4 0.4-1z m5.6 3.6q0 4.7-2.3 8.6t-6.3 6.2-8.6 2.3-8.6-2.3-6.2-6.2-2.3-8.6 2.3-8.6 6.2-6.2 8.6-2.3 8.6 2.3 6.3 6.2 2.3 8.6z" />,
+          viewBox: '0 0 40 40',
+          title: 'A title example',
+          className: 'class-example'
+        },
+        integer: {
+          clickCallback: (element) => { console.log(JSON.stringify(element, null, 4)) },
+          path: (element) => element.src === 27
+            ? <path d='M0 14l6-6-6-6z' />
+            : <path d="m31.7 16.4q0-0.6-0.4-1l-2.1-2.1q-0.4-0.4-1-0.4t-1 0.4l-9.1 9.1-5-5q-0.5-0.4-1-0.4t-1 0.4l-2.1 2q-0.4 0.4-0.4 1 0 0.6 0.4 1l8.1 8.1q0.4 0.4 1 0.4 0.6 0 1-0.4l12.2-12.1q0.4-0.4 0.4-1z m5.6 3.6q0 4.7-2.3 8.6t-6.3 6.2-8.6 2.3-8.6-2.3-6.2-6.2-2.3-8.6 2.3-8.6 6.2-6.2 8.6-2.3 8.6 2.3 6.3 6.2 2.3 8.6z" />,
+          viewBox: (element) => element.src === 27
+            ? '0 0 15 15'
+            : '0 0 40 40',
+          title: (element) => element.src === 27
+            ? 'Special title'
+            : 'Example title',
+          className: (element) => element.src === 27
+            ? 'special-class'
+            : 'class-example'
+        },
+        float: {
+          clickCallback: (element) => { console.log(JSON.stringify(element, null, 4)) },
+          path: <path d="m31.7 16.4q0-0.6-0.4-1l-2.1-2.1q-0.4-0.4-1-0.4t-1 0.4l-9.1 9.1-5-5q-0.5-0.4-1-0.4t-1 0.4l-2.1 2q-0.4 0.4-0.4 1 0 0.6 0.4 1l8.1 8.1q0.4 0.4 1 0.4 0.6 0 1-0.4l12.2-12.1q0.4-0.4 0.4-1z m5.6 3.6q0 4.7-2.3 8.6t-6.3 6.2-8.6 2.3-8.6-2.3-6.2-6.2-2.3-8.6 2.3-8.6 6.2-6.2 8.6-2.3 8.6 2.3 6.3 6.2 2.3 8.6z" />,
+          viewBox: '0 0 40 40',
+          title: 'A title example',
+          className: 'class-example'
+        },
+        bigNumber: {
+          clickCallback: (element) => { console.log(JSON.stringify(element, null, 4)) },
+          path: <path d="m31.7 16.4q0-0.6-0.4-1l-2.1-2.1q-0.4-0.4-1-0.4t-1 0.4l-9.1 9.1-5-5q-0.5-0.4-1-0.4t-1 0.4l-2.1 2q-0.4 0.4-0.4 1 0 0.6 0.4 1l8.1 8.1q0.4 0.4 1 0.4 0.6 0 1-0.4l12.2-12.1q0.4-0.4 0.4-1z m5.6 3.6q0 4.7-2.3 8.6t-6.3 6.2-8.6 2.3-8.6-2.3-6.2-6.2-2.3-8.6 2.3-8.6 6.2-6.2 8.6-2.3 8.6 2.3 6.3 6.2 2.3 8.6z" />,
+          viewBox: '0 0 40 40',
+          title: 'A title example',
+          className: 'class-example'
+        },
+        date: {
+          clickCallback: (element) => { console.log(JSON.stringify(element, null, 4)) },
+          path: <path d="m31.7 16.4q0-0.6-0.4-1l-2.1-2.1q-0.4-0.4-1-0.4t-1 0.4l-9.1 9.1-5-5q-0.5-0.4-1-0.4t-1 0.4l-2.1 2q-0.4 0.4-0.4 1 0 0.6 0.4 1l8.1 8.1q0.4 0.4 1 0.4 0.6 0 1-0.4l12.2-12.1q0.4-0.4 0.4-1z m5.6 3.6q0 4.7-2.3 8.6t-6.3 6.2-8.6 2.3-8.6-2.3-6.2-6.2-2.3-8.6 2.3-8.6 6.2-6.2 8.6-2.3 8.6 2.3 6.3 6.2 2.3 8.6z" />,
+          viewBox: '0 0 40 40',
+          title: 'A title example',
+          className: 'class-example'
+        },
+        string: {
+          clickCallback: (element) => { console.log(JSON.stringify(element, null, 4)) },
+          path: (element) => element.variableName === 'string-key-test'
+            ? <path d='M1344 800v64q0 14-9 23t-23 9h-352v352q0 14-9 23t-23 9h-64q-14 0-23-9t-9-23v-352h-352q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h352v-352q0-14 9-23t23-9h64q14 0 23 9t9 23v352h352q14 0 23 9t9 23zm128 448v-832q0-66-47-113t-113-47h-832q-66 0-113 47t-47 113v832q0 66 47 113t113 47h832q66 0 113-47t47-113zm128-832v832q0 119-84.5 203.5t-203.5 84.5h-832q-119 0-203.5-84.5t-84.5-203.5v-832q0-119 84.5-203.5t203.5-84.5h832q119 0 203.5 84.5t84.5 203.5z' />
+            : <path d="m31.7 16.4q0-0.6-0.4-1l-2.1-2.1q-0.4-0.4-1-0.4t-1 0.4l-9.1 9.1-5-5q-0.5-0.4-1-0.4t-1 0.4l-2.1 2q-0.4 0.4-0.4 1 0 0.6 0.4 1l8.1 8.1q0.4 0.4 1 0.4 0.6 0 1-0.4l12.2-12.1q0.4-0.4 0.4-1z m5.6 3.6q0 4.7-2.3 8.6t-6.3 6.2-8.6 2.3-8.6-2.3-6.2-6.2-2.3-8.6 2.3-8.6 6.2-6.2 8.6-2.3 8.6 2.3 6.3 6.2 2.3 8.6z" />,
+          viewBox: (element) => element.variableName === 'string-key-test'
+            ?'0 0 1792 1792'
+            :'0 0 40 40',
+          title: (element) => element.variableName === 'string-key-test'
+            ? 'Special title'
+            : 'Title example',
+          className: (element) => element.variableName === 'string-key-test'
+            ? 'special-class'
+            : 'class-example'
+        },
+        regexp: {
+          clickCallback: (element) => { console.log(JSON.stringify(element, null, 4)) },
+          path: <path d="m31.7 16.4q0-0.6-0.4-1l-2.1-2.1q-0.4-0.4-1-0.4t-1 0.4l-9.1 9.1-5-5q-0.5-0.4-1-0.4t-1 0.4l-2.1 2q-0.4 0.4-0.4 1 0 0.6 0.4 1l8.1 8.1q0.4 0.4 1 0.4 0.6 0 1-0.4l12.2-12.1q0.4-0.4 0.4-1z m5.6 3.6q0 4.7-2.3 8.6t-6.3 6.2-8.6 2.3-8.6-2.3-6.2-6.2-2.3-8.6 2.3-8.6 6.2-6.2 8.6-2.3 8.6 2.3 6.3 6.2 2.3 8.6z" />,
+          viewBox: '0 0 40 40',
+          title: 'A title example',
+          className: 'class-example'
+        },
+        array: {
+          clickCallback: (element) => { console.log(JSON.stringify(element, null, 4)) },
+          path: <path d="m31.7 16.4q0-0.6-0.4-1l-2.1-2.1q-0.4-0.4-1-0.4t-1 0.4l-9.1 9.1-5-5q-0.5-0.4-1-0.4t-1 0.4l-2.1 2q-0.4 0.4-0.4 1 0 0.6 0.4 1l8.1 8.1q0.4 0.4 1 0.4 0.6 0 1-0.4l12.2-12.1q0.4-0.4 0.4-1z m5.6 3.6q0 4.7-2.3 8.6t-6.3 6.2-8.6 2.3-8.6-2.3-6.2-6.2-2.3-8.6 2.3-8.6 6.2-6.2 8.6-2.3 8.6 2.3 6.3 6.2 2.3 8.6z" />,
+          viewBox: '0 0 40 40',
+          title: 'A title example',
+          className: 'class-example'
+        },
+        empty_array: {
+          clickCallback: (element) => { console.log(JSON.stringify(element, null, 4)) },
+          path: <path d="m31.7 16.4q0-0.6-0.4-1l-2.1-2.1q-0.4-0.4-1-0.4t-1 0.4l-9.1 9.1-5-5q-0.5-0.4-1-0.4t-1 0.4l-2.1 2q-0.4 0.4-0.4 1 0 0.6 0.4 1l8.1 8.1q0.4 0.4 1 0.4 0.6 0 1-0.4l12.2-12.1q0.4-0.4 0.4-1z m5.6 3.6q0 4.7-2.3 8.6t-6.3 6.2-8.6 2.3-8.6-2.3-6.2-6.2-2.3-8.6 2.3-8.6 6.2-6.2 8.6-2.3 8.6 2.3 6.3 6.2 2.3 8.6z" />,
+          viewBox: '0 0 40 40',
+          title: 'A title example',
+          className: 'class-example'
+        },
+        object: {
+          clickCallback: (element) => { console.log(JSON.stringify(element, null, 4)) },
+          path: <path d="m31.7 16.4q0-0.6-0.4-1l-2.1-2.1q-0.4-0.4-1-0.4t-1 0.4l-9.1 9.1-5-5q-0.5-0.4-1-0.4t-1 0.4l-2.1 2q-0.4 0.4-0.4 1 0 0.6 0.4 1l8.1 8.1q0.4 0.4 1 0.4 0.6 0 1-0.4l12.2-12.1q0.4-0.4 0.4-1z m5.6 3.6q0 4.7-2.3 8.6t-6.3 6.2-8.6 2.3-8.6-2.3-6.2-6.2-2.3-8.6 2.3-8.6 6.2-6.2 8.6-2.3 8.6 2.3 6.3 6.2 2.3 8.6z" />,
+          viewBox: '0 0 40 40',
+          title: 'A title example',
+          className: 'class-example'
+        },
+        empty_object: {
+          clickCallback: (element) => { console.log(JSON.stringify(element, null, 4)) },
+          path: <path d="m31.7 16.4q0-0.6-0.4-1l-2.1-2.1q-0.4-0.4-1-0.4t-1 0.4l-9.1 9.1-5-5q-0.5-0.4-1-0.4t-1 0.4l-2.1 2q-0.4 0.4-0.4 1 0 0.6 0.4 1l8.1 8.1q0.4 0.4 1 0.4 0.6 0 1-0.4l12.2-12.1q0.4-0.4 0.4-1z m5.6 3.6q0 4.7-2.3 8.6t-6.3 6.2-8.6 2.3-8.6-2.3-6.2-6.2-2.3-8.6 2.3-8.6 6.2-6.2 8.6-2.3 8.6 2.3 6.3 6.2 2.3 8.6z" />,
+          viewBox: '0 0 40 40',
+          title: 'A title example',
+          className: 'class-example'
+        },
+        function: {
+          clickCallback: (element) => { console.log(JSON.stringify(element, null, 4)) },
+          path: <path d="m31.7 16.4q0-0.6-0.4-1l-2.1-2.1q-0.4-0.4-1-0.4t-1 0.4l-9.1 9.1-5-5q-0.5-0.4-1-0.4t-1 0.4l-2.1 2q-0.4 0.4-0.4 1 0 0.6 0.4 1l8.1 8.1q0.4 0.4 1 0.4 0.6 0 1-0.4l12.2-12.1q0.4-0.4 0.4-1z m5.6 3.6q0 4.7-2.3 8.6t-6.3 6.2-8.6 2.3-8.6-2.3-6.2-6.2-2.3-8.6 2.3-8.6 6.2-6.2 8.6-2.3 8.6 2.3 6.3 6.2 2.3 8.6z" />,
+          viewBox: '0 0 40 40',
+          title: 'A title example',
+          className: 'class-example'
+        },
+        undefined: {
+          clickCallback: (element) => { console.log(JSON.stringify(element, null, 4)) },
+          path: <path d="m31.7 16.4q0-0.6-0.4-1l-2.1-2.1q-0.4-0.4-1-0.4t-1 0.4l-9.1 9.1-5-5q-0.5-0.4-1-0.4t-1 0.4l-2.1 2q-0.4 0.4-0.4 1 0 0.6 0.4 1l8.1 8.1q0.4 0.4 1 0.4 0.6 0 1-0.4l12.2-12.1q0.4-0.4 0.4-1z m5.6 3.6q0 4.7-2.3 8.6t-6.3 6.2-8.6 2.3-8.6-2.3-6.2-6.2-2.3-8.6 2.3-8.6 6.2-6.2 8.6-2.3 8.6 2.3 6.3 6.2 2.3 8.6z" />,
+          viewBox: '0 0 40 40',
+          title: 'A title example',
+          className: 'class-example'
+        },
+        null: {
+          clickCallback: (element) => { console.log(JSON.stringify(element, null, 4)) },
+          path: <path d="m31.7 16.4q0-0.6-0.4-1l-2.1-2.1q-0.4-0.4-1-0.4t-1 0.4l-9.1 9.1-5-5q-0.5-0.4-1-0.4t-1 0.4l-2.1 2q-0.4 0.4-0.4 1 0 0.6 0.4 1l8.1 8.1q0.4 0.4 1 0.4 0.6 0 1-0.4l12.2-12.1q0.4-0.4 0.4-1z m5.6 3.6q0 4.7-2.3 8.6t-6.3 6.2-8.6 2.3-8.6-2.3-6.2-6.2-2.3-8.6 2.3-8.6 6.2-6.2 8.6-2.3 8.6 2.3 6.3 6.2 2.3 8.6z" />,
+          viewBox: '0 0 40 40',
+          title: 'A title example',
+          className: 'class-example'
+        },
+        nan: {
+          clickCallback: (element) => { console.log(JSON.stringify(element, null, 4)) },
+          path: <path d="m31.7 16.4q0-0.6-0.4-1l-2.1-2.1q-0.4-0.4-1-0.4t-1 0.4l-9.1 9.1-5-5q-0.5-0.4-1-0.4t-1 0.4l-2.1 2q-0.4 0.4-0.4 1 0 0.6 0.4 1l8.1 8.1q0.4 0.4 1 0.4 0.6 0 1-0.4l12.2-12.1q0.4-0.4 0.4-1z m5.6 3.6q0 4.7-2.3 8.6t-6.3 6.2-8.6 2.3-8.6-2.3-6.2-6.2-2.3-8.6 2.3-8.6 6.2-6.2 8.6-2.3 8.6 2.3 6.3 6.2 2.3 8.6z" />,
+          viewBox: '0 0 40 40',
+          title: 'A title example',
+          className: 'class-example'
+        },
+      }}
+      onEdit={e => {
+        console.log('edit callback', e)
+        if (e.new_value == 'error') {
+          return false
+        }
+      }}
+      onDelete={e => {
+        console.log('delete callback', e)
+      }}
+      onAdd={e => {
+        console.log('add callback', e)
+        if (e.new_value == 'error') {
+          return false
+        }
+      }}
+      onSelect={e => {
+        console.log('select callback', e)
+        console.log(e.namespace)
+      }}
+      displayObjectSize={true}
+      name={'custom-buttons'}
+      enableClipboard={copy => {
+        console.log('you copied to clipboard!', copy)
+      }}
+      shouldCollapse={({ src, namespace, type }) => {
+        if (type === 'array' && src.indexOf('test') > -1) {
+          return true
+        } else if (namespace.indexOf('moment') > -1) {
+          return true
+        }
+        return false
+      }}
+      defaultValue=''
+    />
   </div>,
   document.getElementById('app-container')
 )
@@ -320,3 +486,35 @@ function getExampleArray () {
 function getExampleWithStringEscapeSequences () {
   return { '\\\n\t\r\f\\n': '\\\n\t\r\f\\n' }
 }
+
+function getExampleJson5 () {
+  return {
+    string: 'this is a test string',
+    'string-key-test': 'this is another test string',
+    integer: 42,
+    'integer-key-test': 27,
+    empty_array: [],
+    empty_object: {},
+    array: [1, 2, 3, 'test'],
+    float: -2.757,
+    undefined_var: undefined,
+    parent: {
+      sibling1: true,
+      sibling2: false,
+      sibling3: null,
+      sibling4: NaN,
+      isString: value => {
+        if (typeof value === 'string') {
+          return 'string'
+        } else {
+          return 'other'
+        }
+      }
+    },
+    string_number: '1234',
+    date: new Date(),
+    moment: Moment(),
+    regexp: /[0-9]/gi,
+    bigNumber: new BigNumber('0.0060254656709730629123'),
+  }
+}
diff --git a/index.d.ts b/index.d.ts
index 3d49b19..5b8e7ba 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -165,6 +165,12 @@ export interface ReactJsonViewProps {
    * Default: true
    */
   escapeStrings?: boolean
+  /**
+   * Adds custom buttons according to the value type.
+   *
+   * Default: null
+   */
+  customButtons?: TypeCustomButtons
 }
 
 export interface OnCopyProps {
@@ -308,5 +314,15 @@ export type ThemeKeys =
   | 'tube'
   | 'twilight'
 
+export type TypeCustomButtons = {
+  [valueType: string]: {
+    clickCallback: (element: { variableName: string; src: string; namespace: Array<string>; name: string; }) => void
+    path: React.ReactElement<React.SVGProps<SVGPathElement>> | ((element: { variableName: string; src: string; namespace: Array<string>; name: string; }) => React.ReactElement<React.SVGProps<SVGPathElement>>)
+    viewBox?: string | ((element: { variableName: string; src: string; namespace: Array<string>; name: string; }) => string)
+    title?: string | ((element: { variableName: string; src: string; namespace: Array<string>; name: string; }) => string)
+    className?: string | ((element: { variableName: string; src: string; namespace: Array<string>; name: string; }) => string)
+  }
+}
+
 declare const ReactJson: React.ComponentType<ReactJsonViewProps>
 export default ReactJson
diff --git a/src/js/components/ArrayGroup.js b/src/js/components/ArrayGroup.js
index 55d6122..c6e66e7 100644
--- a/src/js/components/ArrayGroup.js
+++ b/src/js/components/ArrayGroup.js
@@ -50,6 +50,7 @@ export default class extends React.PureComponent {
       jsvRoot,
       namespace,
       parent_type,
+      customButtons,
       ...rest
     } = this.props
 
@@ -74,7 +75,7 @@ export default class extends React.PureComponent {
         <ObjectName {...this.props} />
 
         <span>
-          <VariableMeta size={src.length} {...this.props} />
+          <VariableMeta customButtons={customButtons} size={src.length} {...this.props} />
         </span>
         {[...Array(groups)].map((_, i) => (
           <div
diff --git a/src/js/components/CustomButton.js b/src/js/components/CustomButton.js
new file mode 100644
index 0000000..fa5f7ee
--- /dev/null
+++ b/src/js/components/CustomButton.js
@@ -0,0 +1,83 @@
+import React from 'react'
+import { CustomIcon } from './icons'
+import Theme from './../themes/getStyle'
+
+export default class extends React.PureComponent {
+  constructor(props) {
+    super(props)
+  }
+
+  handleClick = () => {
+    const { clickCallback, src, namespace, variableName } = this.props
+
+    clickCallback({
+      variableName: variableName,
+      src: src,
+      namespace: namespace,
+      name: namespace[namespace.length - 1]
+    })
+  }
+
+  getClippyIcon = () => {
+    const { theme } = this.props
+
+    return (
+      <CustomIcon
+        className='custom-icon'
+        {...this.props}
+        {...Theme(theme, 'custom-icon')}
+      />
+    )
+  }
+
+  render () {
+    const { src, theme, hidden, rowHovered, namespace, variableName, title, className } = this.props;
+    const style = Theme(theme, 'custom-button').style
+    let display = 'inline'
+
+    if (hidden) {
+      display = 'none'
+    }
+
+    return (
+      <span
+        className={typeof className === 'function'
+          ? className({
+            variableName: variableName,
+            src: src,
+            namespace: namespace,
+            name: namespace[namespace.length - 1]
+          })
+          : typeof className === 'string'
+            ? className
+            : ''
+        }
+        title={typeof title === 'function'
+          ? title({
+            variableName: variableName,
+            src: src,
+            namespace: namespace,
+            name: namespace[namespace.length - 1]
+          })
+          : typeof title === 'string'
+            ? title
+            : ''
+        }
+        style={{
+          verticalAlign: 'top',
+          display: rowHovered ? 'inline-block' : 'none'
+        }}
+      >
+        <span
+          style={{
+            ...style,
+            display: display
+          }}
+          onClick={this.handleClick}
+        >
+          {this.getClippyIcon()}
+        </span>
+      </span>
+    )
+  }
+}
diff --git a/src/js/components/DataTypes/Object.js b/src/js/components/DataTypes/Object.js
index a7a0605..c50573d 100644
--- a/src/js/components/DataTypes/Object.js
+++ b/src/js/components/DataTypes/Object.js
@@ -130,9 +130,9 @@ class RjvObject extends React.PureComponent {
   }
 
   getObjectMetaData = src => {
-    const { rjvId, theme } = this.props
+    const { rjvId, theme, customButtons } = this.props
     const { size, hovered } = this.state
-    return <VariableMeta rowHovered={hovered} size={size} {...this.props} />
+    return <VariableMeta customButtons={customButtons} rowHovered={hovered} size={size} {...this.props} />
   }
 
   getBraceStart (object_type, expanded) {
diff --git a/src/js/components/JsonViewer.js b/src/js/components/JsonViewer.js
index 41f4b88..b18abcc 100644
--- a/src/js/components/JsonViewer.js
+++ b/src/js/components/JsonViewer.js
@@ -25,7 +25,7 @@ export default class extends React.PureComponent {
     return (
       <div className='pretty-json-container object-container'>
         <div className='object-content'>
-          <ObjectComponent namespace={namespace} depth={0} jsvRoot {...props} />
+          <ObjectComponent namespace={namespace} depth={0} jsvRoot customButtons={{}} {...props} />
         </div>
       </div>
     )
diff --git a/src/js/components/VariableEditor.js b/src/js/components/VariableEditor.js
index d0bcb32..1caf114 100644
--- a/src/js/components/VariableEditor.js
+++ b/src/js/components/VariableEditor.js
@@ -6,6 +6,7 @@ import dispatcher from './../helpers/dispatcher'
 import parseInput from './../helpers/parseInput'
 import stringifyVariable from './../helpers/stringifyVariable'
 import CopyToClipboard from './CopyToClipboard'
+import CustomButton from './CustomButton'
 
 // data type components
 import {
@@ -57,9 +58,11 @@ class VariableEditor extends React.PureComponent {
       onSelect,
       displayArrayKey,
       quotesOnKeys,
-      keyModifier
+      keyModifier,
+      customButtons
     } = this.props
     const { editMode } = this.state
+
     return (
       <div
         {...Theme(theme, 'objectKeyVal', {
@@ -137,6 +140,18 @@ class VariableEditor extends React.PureComponent {
             />
             )
           : null}
+        {customButtons[variable.type]
+          ? (
+            <CustomButton
+              rowHovered={this.state.hovered}
+              hidden={editMode}
+              variableName={escapeString(variable.name)}
+              src={variable.value}
+              {...customButtons[variable.type]}
+              {...{ theme, namespace: [...namespace, variable.type] }}
+            />
+            )
+          : null}
         {onEdit !== false && editMode == false ? this.getEditIcon() : null}
         {onDelete !== false && editMode == false ? this.getRemoveIcon() : null}
       </div>
@@ -331,7 +346,7 @@ class VariableEditor extends React.PureComponent {
       if (BigNumber && parsedInput.type === 'bigNumber') {
         new_value = new BigNumber(new_value)
       }
-    } 
+    }
     this.setState({
       editMode: false
     })
diff --git a/src/js/components/VariableMeta.js b/src/js/components/VariableMeta.js
index 1da8d9d..337fc76 100644
--- a/src/js/components/VariableMeta.js
+++ b/src/js/components/VariableMeta.js
@@ -2,6 +2,7 @@ import React from 'react'
 import dispatcher from './../helpers/dispatcher'
 
 import CopyToClipboard from './CopyToClipboard'
+import CustomButton from './CustomButton'
 import { toType } from './../helpers/util'
 
 // icons
@@ -108,7 +109,9 @@ export default class extends React.PureComponent {
       enableClipboard,
       src,
       namespace,
-      rowHovered
+      rowHovered,
+      name,
+      customButtons
     } = this.props
     return (
       <div
@@ -130,6 +133,15 @@ export default class extends React.PureComponent {
             />
             )
           : null}
+        {customButtons[toType(src)]
+          ? (
+            <CustomButton
+              rowHovered={rowHovered}
+              {...customButtons[toType(src)]}
+              {...{ src, theme, namespace }}
+            />
+            )
+          : null}
         {/* copy add/remove icons */}
         {onAdd !== false ? this.getAddAttribute(rowHovered) : null}
         {onDelete !== false ? this.getRemoveObject(rowHovered) : null}
diff --git a/src/js/components/icons.js b/src/js/components/icons.js
index 0f5e41f..566622c 100644
--- a/src/js/components/icons.js
+++ b/src/js/components/icons.js
@@ -266,6 +266,57 @@ export class CheckCircle extends React.PureComponent {
   }
 }
 
+export class CustomIcon extends React.PureComponent {
+  handleViewBox = () => {
+    const { viewBox, src, namespace, variableName } = this.props
+
+    return viewBox({
+      variableName: variableName,
+      src: src,
+      namespace: namespace,
+      name: namespace[namespace.length - 1]
+    })
+  }
+
+  render () {
+    const { props } = this
+    const { style, path, viewBox, src, namespace, variableName } = props
+
+    return (
+      <span>
+        <svg
+          {...getIconStyle(style)}
+          viewBox={typeof viewBox === 'function'
+            ? viewBox({
+              variableName: variableName,
+              src: src,
+              namespace: namespace,
+              name: namespace[namespace.length - 1]
+            })
+            : typeof viewBox === 'string'
+              ? viewBox
+              : '0 0 24 24'
+          }
+          fill='currentColor'
+          preserveAspectRatio='xMidYMid meet'
+        >
+          <g>
+            {typeof path === 'function'
+            ? path({
+              variableName: variableName,
+              src: src,
+              namespace: namespace,
+              name: namespace[namespace.length - 1]
+            })
+            : path
+          }
+          </g>
+        </svg>
+      </span>
+    )
+  }
+}
+
 function getIconStyle (style) {
   if (!style) {
     style = {}
diff --git a/src/js/themes/getStyle.js b/src/js/themes/getStyle.js
index a8b290d..f0273ca 100644
--- a/src/js/themes/getStyle.js
+++ b/src/js/themes/getStyle.js
@@ -234,6 +234,16 @@ const getDefaultThemeStyling = theme => {
       color: colors.copyToClipboardCheck,
       marginLeft: constants.clipboardCheckMarginLeft
     },
+    'custom-button': {
+      cursor: 'pointer'
+    },
+    'custom-icon': {
+      color: 'currentColor',
+      fontSize: constants.iconFontSize,
+      marginRight: constants.iconMarginRight,
+      verticalAlign: 'top',
+      transition: 'color 150ms ease-in-out'
+    },
     'array-group-meta-data': {
       display: 'inline-block',
       padding: constants.arrayGroupMetaPadding

From dde8679df94f9b009417e85288dbbeb85e7956b0 Mon Sep 17 00:00:00 2001
From: n1c0de <nicolas.charras@elysium-security.com>
Date: Tue, 27 May 2025 11:32:42 +0200
Subject: [PATCH 4/5] test: add a custom button test

---
 test/tests/js/components/CustomButton-test.js | 55 +++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 test/tests/js/components/CustomButton-test.js

diff --git a/test/tests/js/components/CustomButton-test.js b/test/tests/js/components/CustomButton-test.js
new file mode 100644
index 0000000..ac3c2ce
--- /dev/null
+++ b/test/tests/js/components/CustomButton-test.js
@@ -0,0 +1,55 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import { expect } from 'chai'
+import sinon from 'sinon'
+
+import CustomButton from './../../../../src/js/components/CustomButton'
+
+const pathJSX = (
+  <path d="m31.7 16.4q0-0.6-0.4-1l-2.1-2.1q-0.4-0.4-1-0.4t-1 0.4l-9.1 9.1-5-5q-0.5-0.4-1-0.4t-1 0.4l-2.1 2q-0.4 0.4-0.4 1 0 0.6 0.4 1l8.1 8.1q0.4 0.4 1 0.4 0.6 0 1-0.4l12.2-12.1q0.4-0.4 0.4-1z m5.6 3.6q0 4.7-2.3 8.6t-6.3 6.2-8.6 2.3-8.6-2.3-6.2-6.2-2.3-8.6 2.3-8.6 6.2-6.2 8.6-2.3 8.6 2.3 6.3 6.2 2.3 8.6z" />
+);
+
+describe('<CustomButton />', function () {
+  it('CustomButton component should exist', function () {
+    const logSpy = sinon.spy(console, 'log')
+    const wrapper = shallow(
+      <CustomButton
+        clickCallback={(element) => console.log('It works!')}
+        path={pathJSX}
+        viewBox='0 0 40 40'
+        title='A title example'
+        className='class-example'
+        hidden={false}
+      />
+    )
+
+    expect(wrapper.find('span')).to.have.length(1)
+    try {
+      wrapper.find('.class-example').simulate('click')
+      expect(logSpy.calledWith('It works!')).to.be.true
+    } finally {
+      logSpy.restore()
+    }
+    expect(
+      wrapper.find('svg').containsMatchingElement(pathJSX)
+    ).to.be.true
+    expect(wrapper.find('svg').prop('viewBox')).to.equal('0 0 40 40')
+    expect(wrapper.find('.class-example').prop('title')).to.equal('A title example')
+    expect(wrapper.find('.class-example').prop('className')).to.equal('class-example')
+  })
+
+  it('CustomButton component should be hidden', function () {
+    const wrapper = shallow(
+      <CustomButton
+        clickCallback={(element) => console.log('It works!')}
+        path={pathJSX}
+        viewBox='0 0 40 40'
+        title='A title example'
+        className='class-example'
+        hidden
+      />
+    )
+
+    expect(wrapper.find('span').prop('style')).to.have.property('display', 'none')
+  })
+})

From 93e781836d2c5fd001e4b5a265ad5996531e9a8a Mon Sep 17 00:00:00 2001
From: n1c0de <nicolas.charras@elysium-security.com>
Date: Tue, 27 May 2025 17:27:25 +0200
Subject: [PATCH 5/5] chore(version): reset fork version to align with source
 project

---
 CHANGELOG.md | 2 --
 package.json | 2 +-
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a306f10..19eb72d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,8 +2,6 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
-### [1.26.3](https://github.com/n1c0de/react-json-view/compare/v1.26.2...v1.26.3) (2025-05-26)
-
 ### [1.26.2](https://github.com/microlinkhq/react-json-view/compare/v1.26.1...v1.26.2) (2025-05-16)
 
 ### [1.26.1](https://github.com/microlinkhq/react-json-view/compare/v1.26.0...v1.26.1) (2025-02-15)
diff --git a/package.json b/package.json
index 75f3d51..f7c1491 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "@microlink/react-json-view",
   "description": "Interactive react component for displaying javascript arrays and JSON objects.",
   "homepage": "https://github.com/microlinkhq/react-json-view",
-  "version": "1.26.3",
+  "version": "1.26.2",
   "main": "dist/main.js",
   "author": {
     "name": "Mac Gainor"