put in a line renderer that gives an opportunity to customize key/value key /nestedvalue behavior

packages/react-json-tree/src/JSONNestedNode.js

@@ -90,6 +90,7 @@ export default class JSONNestedNode extends React.Component {
       PropTypes.oneOfType([PropTypes.string, PropTypes.number])
     ).isRequired,
     labelRenderer: PropTypes.func.isRequired,
+    lineRenderer: PropTypes.func.isRequired,
     shouldExpandNode: PropTypes.func,
     level: PropTypes.number.isRequired,
     sortObjectKeys: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
@@ -140,6 +141,7 @@ export default class JSONNestedNode extends React.Component {
       collectionLimit,
       keyPath,
       labelRenderer,
+      lineRenderer,
       expandable
     } = this.props;
     const { expanded } = this.state;
@@ -161,23 +163,16 @@ export default class JSONNestedNode extends React.Component {
     );
     const stylingArgs = [keyPath, nodeType, expanded, expandable];
 
-    return hideRoot ? (
-      <li {...styling('rootNode', ...stylingArgs)}>
-        <ul {...styling('rootNodeChildren', ...stylingArgs)}>
-          {renderedChildren}
-        </ul>
-      </li>
-    ) : (
-      <li {...styling('nestedNode', ...stylingArgs)}>
-        {expandable && (
-          <JSONArrow
-            styling={styling}
-            nodeType={nodeType}
-            expanded={expanded}
-            onClick={this.handleClick}
-          />
-        )}
-        <label
+    const labelItem = <>
+      {expandable && (
+        <JSONArrow
+          styling={styling}
+          nodeType={nodeType}
+          expanded={expanded}
+          onClick={this.handleClick}
+        />
+      )}
+      <label
           {...styling(['label', 'nestedNodeLabel'], ...stylingArgs)}
           onClick={this.handleClick}
         >
@@ -189,11 +184,25 @@ export default class JSONNestedNode extends React.Component {
         >
           {renderedItemString}
         </span>
-        <ul {...styling('nestedNodeChildren', ...stylingArgs)}>
+        </>
+
+     const valueItem = 
+            <ul {...styling('nestedNodeChildren', ...stylingArgs)}>
+          {renderedChildren}
+        </ul>
+        
+    
+    return hideRoot ? (
+      <li {...styling('rootNode', ...stylingArgs)}>
+        <ul {...styling('rootNodeChildren', ...stylingArgs)}>
           {renderedChildren}
         </ul>
       </li>
-    );
+    ) : 
+      <li  {...styling('nestedNode', ...stylingArgs)}>
+      {lineRenderer(labelItem, valueItem, ...stylingArgs)}
+      </li>
+    ;
   }
 
   handleClick = () => {

packages/react-json-tree/src/JSONNode.js

@@ -10,6 +10,7 @@ const JSONNode = ({
   getItemString,
   keyPath,
   labelRenderer,
+  lineRenderer,
   styling,
   value,
   valueRenderer,
@@ -23,6 +24,7 @@ const JSONNode = ({
     key: keyPath[0],
     keyPath,
     labelRenderer,
+    lineRenderer,
     nodeType,
     styling,
     value,
@@ -100,6 +102,7 @@ JSONNode.propTypes = {
     PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   ).isRequired,
   labelRenderer: PropTypes.func.isRequired,
+  lineRenderer: PropTypes.func.isRequired,
   styling: PropTypes.func.isRequired,
   value: PropTypes.any,
   valueRenderer: PropTypes.func.isRequired,

packages/react-json-tree/src/JSONValueNode.js

@@ -9,25 +9,29 @@ const JSONValueNode = ({
   nodeType,
   styling,
   labelRenderer,
+  lineRenderer, 
   keyPath,
   valueRenderer,
   value,
   valueGetter
-}) => (
-  <li {...styling('value', nodeType, keyPath)}>
-    <label {...styling(['label', 'valueLabel'], nodeType, keyPath)}>
-      {labelRenderer(keyPath, nodeType, false, false)}
-    </label>
-    <span {...styling('valueText', nodeType, keyPath)}>
+}) =>  {
+    const labelItem = (<label {...styling(['label', 'valueLabel'], nodeType, keyPath)}>
+     {labelRenderer(keyPath, nodeType, false, false)}
+    </label>)
+    const valueItem = (<span {...styling('valueText', nodeType, keyPath)}>
       {valueRenderer(valueGetter(value), value, ...keyPath)}
-    </span>
+    </span>)
+  return <li {...styling('value', nodeType, keyPath)}>
+  {lineRenderer(labelItem, valueItem, keyPath,nodeType, false, false)}
   </li>
-);
+};
+
 
 JSONValueNode.propTypes = {
   nodeType: PropTypes.string.isRequired,
   styling: PropTypes.func.isRequired,
   labelRenderer: PropTypes.func.isRequired,
+  lineRenderer: PropTypes.func.isRequired,
   keyPath: PropTypes.arrayOf(
     PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   ).isRequired,

packages/react-json-tree/src/index.js

@@ -17,6 +17,7 @@ const defaultItemString = (type, data, itemType, itemString) => (
   </span>
 );
 const defaultLabelRenderer = ([label]) => <span>{label}:</span>;
+const defaultLineRenderer = (labelItem, valueItem, [other]) => <>{labelItem}{valueItem}</>;
 const noCustomNode = () => false;
 
 function checkLegacyTheming(theme, props) {
@@ -98,6 +99,7 @@ export default class JSONTree extends React.Component {
     keyPath: ['root'],
     getItemString: defaultItemString,
     labelRenderer: defaultLabelRenderer,
+    lineRenderer: defaultLineRenderer, 
     valueRenderer: identity,
     postprocessValue: identity,
     isCustomNode: noCustomNode,