Pass more information to InteractiveLabel component

README.md

@@ -40,9 +40,16 @@ to built-in search bar. Pass `false` to disable search.
 
 #### props.interactiveLabel
 
-Pass component factory that would accept `value` property. Can be used to create
-custom input fields for JSON property names and primitive values, see
-[#3](https://github.com/Lapple/react-json-inspector/issues/3) for more information.
+Pass component factory that would receive the following properties:
+
+- `value`, either stringified property value or key value that is being interacted with,
+- `originalValue`, either the original property value or key value,
+- `isKey`, boolean flag to differentiate between interacting with keys or properties,
+- `keypath`, keypath of the node being interacted with, will be the same for keys and properties
+
+Can be used to create custom input fields for JSON property names and primitive
+values, see [#3](https://github.com/Lapple/react-json-inspector/issues/3)
+for more information.
 
 #### props.onClick
 

lib/leaf.js

@@ -41,7 +41,7 @@ var Leaf = React.createClass({
                 D.span({ className: 'json-inspector__key' },
                     this.format(d.key),
                     ':',
-                    this.renderInteractiveLabel(d.key)),
+                    this.renderInteractiveLabel(d.key, true)),
                 this.renderTitle(),
                 this.renderShowOriginalButton()),
             this.renderChildren());
@@ -60,7 +60,7 @@ var Leaf = React.createClass({
             default:
                 return D.span({ className: 'json-inspector__value json-inspector__value_' + t.toLowerCase() },
                     this.format(String(data)),
-                    this.renderInteractiveLabel(String(data)));
+                    this.renderInteractiveLabel(data, false));
         }
     },
     renderChildren: function() {
@@ -99,10 +99,15 @@ var Leaf = React.createClass({
             onClick: this._onShowOriginalClick
         });
     },
-    renderInteractiveLabel: function(value) {
+    renderInteractiveLabel: function(originalValue, isKey) {
         if (typeof this.props.interactiveLabel === 'function') {
             return this.props.interactiveLabel({
-                value: value
+                // The distinction between `value` and `originalValue` is
+                // provided to have backwards compatibility.
+                value: String(originalValue),
+                originalValue: originalValue,
+                isKey: isKey,
+                keypath: this.keypath()
             });
         }