collapsed object with props names

README.md

@@ -2,7 +2,7 @@
 
 [![npm](https://img.shields.io/npm/v/react-json-view.svg)](https://www.npmjs.com/package/react-json-view) [![npm](https://img.shields.io/npm/l/react-json-view.svg)](https://github.com/mac-s-g/react-json-view/blob/master/LISCENSE) [![Build Status](https://travis-ci.org/mac-s-g/react-json-view.svg)](https://travis-ci.org/mac-s-g/react-json-view) [![Coverage Status](https://coveralls.io/repos/github/mac-s-g/react-json-view/badge.svg?branch=master)](https://coveralls.io/github/mac-s-g/react-json-view?branch=master)
 
-# react-json-view
+# react-json-view-2
 RJV is a React component for displaying and editing javascript **arrays** and **JSON objects**.
 
 This component provides a responsive interface for displaying arrays or JSON in a web browser.  NPM offers a distribution of the source that's transpiled to ES5; so you can include this component with *any web-based javascript application*.
@@ -12,8 +12,8 @@ This component provides a responsive interface for displaying arrays or JSON in
 
 ### Implementation Example
 ```js
-// import the react-json-view component
-import ReactJson from 'react-json-view'
+// import the react-json-view-2 component
+import ReactJson from 'react-json-view-2'
 
 // use the component in your app!
 <ReactJson src={my_json_object} />
@@ -28,12 +28,12 @@ import ReactJson from 'react-json-view'
 ### Installation Instructions
 Install this component with [NPM](https://www.npmjs.com/package/react-json-view).
 ```shell
-npm install --save react-json-view
+npm install --save react-json-view-2
 ```
 Or add to your package.json config file:
 ```json
 "dependencies": {
-    "react-json-view": "latest"
+    "react-json-view-2": "latest"
 }
 ```
 
@@ -62,6 +62,7 @@ Name|Type|Default|Description
 `quotesOnKeys`|`boolean`|`true`|set to false to remove quotes from keys (eg. `"name":` vs. `name:`)
 `validationMessage`|`string`|"Validation Error"|Custom message for validation failures to `onEdit`, `onAdd`, or `onDelete` callbacks
 `displayArrayKey`|`boolean`|`true`|When set to `true`, the index of the elements prefix values
+`objectCollpasedMaxPropsCount`|`boolean` or `intiger`|`false`|When set to `true`, see object props when object is collpased, intiger set max display props count
 
 ### Features
 * `onEdit`, `onAdd` and `onDelete` props allow users to edit the `src` variable

dev-server/src/index.js

@@ -52,6 +52,7 @@ ReactDom.render(
                 return false;
             }}
             defaultValue=""
+            objectCollpasedMaxPropsCount={4}
         />
 
         <br />
@@ -84,6 +85,7 @@ ReactDom.render(
                 src.constructor &&
                 src.constructor.name === 'Moment'
             }
+            objectCollpasedMaxPropsCount={4}
         />
 
         <br />
@@ -95,6 +97,7 @@ ReactDom.render(
             name={'feature_set'}
             displayDataTypes={false}
             indentWidth={2}
+            objectCollpasedMaxPropsCount={4}
         />
 
         <br />
@@ -106,6 +109,7 @@ ReactDom.render(
             name={'feature_set'}
             displayDataTypes={false}
             indentWidth={5}
+            objectCollpasedMaxPropsCount={4}
         />
 
         <br />
@@ -119,6 +123,7 @@ ReactDom.render(
             displayObjectSize={false}
             displayDataTypes={false}
             enableClipboard={false}
+            objectCollpasedMaxPropsCount={4}
         />
 
         <br />
@@ -130,6 +135,7 @@ ReactDom.render(
             onEdit={edit => {
                 console.log(edit);
             }}
+            objectCollpasedMaxPropsCount={4}
         />
 
         <br />
@@ -159,6 +165,7 @@ ReactDom.render(
                 base0E: 'rgba(70, 70, 230, 1)',
                 base0F: 'rgba(70, 70, 230, 1)'
             }}
+            objectCollpasedMaxPropsCount={true}
         />
 
         <JsonViewer
@@ -167,6 +174,7 @@ ReactDom.render(
             name="large_array"
             groupArraysAfterLength={50}
             src={getExampleJson4()}
+            objectCollpasedMaxPropsCount={true}
         />
     </div>,
     document.getElementById('app-container')

doc/example-usage.js

@@ -1,5 +1,5 @@
 
-import ReactJson from 'react-json-view';
+import ReactJson from 'react-json-view-2';
 
 //you have some json to display
 let my_important_json = {
@@ -31,7 +31,7 @@ let my_important_json = {
 
 
 // ES6 with React
-import ReactJson from 'react-json-view';
+import ReactJson from 'react-json-view-2';
 
 ...
 <ReactJson src={my_important_json} />

index.d.ts

@@ -140,7 +140,13 @@ export interface ReactJsonViewProps {
    *
    * Default: null
    */
-  defaultValue?: TypeDefaultValue | TypeDefaultValue[] | null;
+  defaultValue?: TypeDefaultValue | TypeDefaultValue[] | null;  
+  /**
+   * Set to a value to be used as see object props when object is collpased
+   *
+   * Default: null
+   */
+   objectCollpasedMaxPropsCount?: number | boolean;
 }
 
 export interface OnCopyProps {