Custom renderer for debug info

lib/Autocomplete.js

@@ -157,6 +157,11 @@ class Autocomplete extends React.Component {
      */
     open: PropTypes.bool,
     debug: PropTypes.bool,
+    /**
+     * Arguments: `renderer: Function`
+     * Custom renderer for debug info
+     */
+    renderDebug: PropTypes.func,
   }
 
   static defaultProps = {
@@ -188,6 +193,11 @@ class Autocomplete extends React.Component {
     autoHighlight: true,
     selectOnBlur: false,
     onMenuVisibilityChange() {},
+    renderDebug: function (debugStates) {
+      return <pre style={{ marginLeft: 300 }}>
+        {JSON.stringify(debugStates.slice(Math.max(0, debugStates.length - 5), debugStates.length), null, 2)}
+      </pre>
+    }
   }
 
   constructor(props) {
@@ -568,7 +578,7 @@ class Autocomplete extends React.Component {
       })
     }
 
-    const { inputProps } = this.props
+    const { inputProps, renderDebug } = this.props
     const open = this.isOpen()
     return (
       <div style={{ ...this.props.wrapperStyle }} {...this.props.wrapperProps}>
@@ -587,11 +597,7 @@ class Autocomplete extends React.Component {
           value: this.props.value,
         })}
         {open && this.renderMenu()}
-        {this.props.debug && (
-          <pre style={{ marginLeft: 300 }}>
-            {JSON.stringify(this._debugStates.slice(Math.max(0, this._debugStates.length - 5), this._debugStates.length), null, 2)}
-          </pre>
-        )}
+        {this.props.debug && renderDebug ? renderDebug(this._debugStates) : null}
       </div>
     )
   }