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