Tidied up a bit more and updated docs on README

Author: bvaughn

README.md

@@ -117,6 +117,19 @@ Then the preview of child elements now look like this:
 
 ![](http://cl.ly/image/1J1a0b0T0K3c/screenshot%202015-10-07%20at%203.44.31%20PM.png)
 
+#### Customize Rendering
+
+You can pass the following properties to customize rendered labels and values:
+
+```js
+<JSONTree
+    labelRenderer={raw => <strong>raw</strong>}
+    valueRenderer={raw => <em>raw</em>}
+/>
+```
+
+In this example the label and value will be rendered with `<strong>` and `<em>` wrappers respectively.
+
 ### Credits
 
 - All credits to [Dave Vedder](http://www.eskimospy.com/) ([[email protected]](mailto:[email protected])), who wrote the original code as [JSONViewer](https://bitbucket.org/davevedder/react-json-viewer/).

src/JSONArrayNode.js

@@ -36,7 +36,7 @@ function getItemString(itemType, context) {
   return context.props.getItemString('Array', context.props.data, itemType, context.itemString);
 }
 
-// Configures <JSONNestedNode> to render an Array 
+// Configures <JSONNestedNode> to render an Array
 export default function JSONArrayNode({ ...props }) {
   return (
     <JSONNestedNode

src/JSONNestedNode.js

@@ -81,7 +81,7 @@ export default class JSONNestedNode extends React.Component {
           color: this.props.theme.base0D,
           ...this.props.styles.getLabelStyle(this.props.nodeType, this.state.expanded)
         }} onClick={::this.handleClick}>
-          {this.props.getRenderedLabel(this.props.keyName)}:
+          {this.props.labelRenderer(this.props.keyName)}:
         </label>
         <span style={{
           ...spanStyle,

src/JSONValueNode.js

@@ -42,12 +42,12 @@ export default class JSONValueNode extends React.Component {
           color: this.props.theme.base0D,
           ...this.props.styles.getLabelStyle(this.props.nodeType, true)
         }}>
-          {this.props.getRenderedLabel(this.props.keyName)}:
+          {this.props.labelRenderer(this.props.keyName)}:
         </label>
         <span style={{
           color: this.props.theme.base0B,
           ...this.props.styles.getValueStyle('String', true)
-        }}>"{this.props.getRenderedValue(this.props.valueGetter(this.props.value))}"</span>
+        }}>"{this.props.valueRenderer(this.props.valueGetter(this.props.value))}"</span>
       </li>
     );
   }

src/grab-node.js

@@ -7,59 +7,61 @@ import JSONValueNode from './JSONValueNode';
 
 export default function({
   getItemString,
-  getRenderedLabel,
-  getRenderedValue,
   initialExpanded = false,
   key,
+  labelRenderer,
   previousData,
   styles,
   theme,
-  value
+  value,
+  valueRenderer
 }) {
   const nodeType = objType(value);
 
-  const sharedProps = {
+  const simpleNodeProps = {
     getItemString,
-    getRenderedLabel,
-    getRenderedValue,
     initialExpanded,
     key,
     keyName: key,
+    labelRenderer,
     nodeType,
     previousData,
     styles,
     theme,
-    value
+    value,
+    valueRenderer
   };
 
-  const containerProps = {
-    ...sharedProps,
+  const nestedNodeProps = {
+    ...simpleNodeProps,
     data: value,
     getItemString,
     initialExpanded,
     keyName: key
   };
 
-  if (nodeType === 'Object') {
-    return <JSONObjectNode {...containerProps} />;
-  } else if (nodeType === 'Array') {
-    return <JSONArrayNode {...containerProps} />;
-  } else if (nodeType === 'Iterable') {
-    return <JSONIterableNode {...containerProps} />;
-  } else if (nodeType === 'String') {
-    return <JSONValueNode {...sharedProps} />;
-  } else if (nodeType === 'Number') {
-    return <JSONValueNode {...sharedProps} />;
-  } else if (nodeType === 'Boolean') {
-    return <JSONValueNode {...sharedProps} valueGetter={raw => raw ? 'true' : 'false'} />;
-  } else if (nodeType === 'Date') {
-    return <JSONValueNode {...sharedProps} valueGetter={raw => raw.toISOString()} />;
-  } else if (nodeType === 'Null') {
-    return <JSONValueNode {...sharedProps} valueGetter={() => null} />;
-  } else if (nodeType === 'Undefined') {
-    return <JSONValueNode {...sharedProps} valueGetter={() => undefined} />;
-  } else if (nodeType === 'Function') {
-    return <JSONValueNode {...sharedProps} valueGetter={raw => raw.toString()} />;
+  switch (nodeType) {
+    case 'Object':
+      return <JSONObjectNode {...nestedNodeProps} />;
+    case 'Array':
+      return <JSONArrayNode {...nestedNodeProps} />;
+    case 'Iterable':
+      return <JSONIterableNode {...nestedNodeProps} />;
+    case 'String':
+      return <JSONValueNode {...simpleNodeProps} />;
+    case 'Number':
+      return <JSONValueNode {...simpleNodeProps} />;
+    case 'Boolean':
+      return <JSONValueNode {...simpleNodeProps} valueGetter={raw => raw ? 'true' : 'false'} />;
+    case 'Date':
+      return <JSONValueNode {...simpleNodeProps} valueGetter={raw => raw.toISOString()} />;
+    case 'Null':
+      return <JSONValueNode {...simpleNodeProps} valueGetter={() => null} />;
+    case 'Undefined':
+      return <JSONValueNode {...simpleNodeProps} valueGetter={() => undefined} />;
+    case 'Function':
+      return <JSONValueNode {...simpleNodeProps} valueGetter={raw => raw.toString()} />;
+    default:
+      return false;
   }
-  return false;
 }

src/index.js

@@ -23,7 +23,7 @@ const styles = {
 };
 
 const getEmptyStyle = () => ({});
-const getRenderedDefault = text => text;
+const identity = value => value;
 
 export default class JSONTree extends React.Component {
   static propTypes = {
@@ -41,10 +41,10 @@ export default class JSONTree extends React.Component {
     getListStyle: getEmptyStyle,
     getItemStringStyle: getEmptyStyle,
     getLabelStyle: getEmptyStyle,
-    getRenderedLabel: getRenderedDefault,
     getValueStyle: getEmptyStyle,
-    getRenderedValue: getRenderedDefault,
-    getItemString: (type, data, itemType, itemString) => <span>{itemType} {itemString}</span>
+    getItemString: (type, data, itemType, itemString) => <span>{itemType} {itemString}</span>,
+    labelRenderer: identity,
+    valueRenderer: identity
   };
 
   constructor(props) {
@@ -64,23 +64,23 @@ export default class JSONTree extends React.Component {
       data: value,
       expandRoot: initialExpanded,
       getItemString,
-      getRenderedLabel,
-      getRenderedValue,
+      labelRenderer,
+      valueRenderer,
       keyName: key,
       previousData,
       theme
     } = this.props;
 
     const rootNode = grabNode({
       getItemString,
-      getRenderedLabel,
-      getRenderedValue,
       initialExpanded,
       key,
       previousData,
       styles: getStyles,
       theme,
-      value
+      labelRenderer,
+      value,
+      valueRenderer
     });
 
     return (