Use "className" instead of "class" in React components

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)

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>

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

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>
   )

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": "[email protected]"
+    },
+    {
+      "name": "n1c0de",
+      "email": "[email protected]"
     }
   ],
   "repository": {

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,15 +79,15 @@ 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
             })}
           >
             <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

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 => {

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>
       )

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>

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>

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,

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>

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>

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,

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>}

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'
         />
       )
   }