Merge pull request #26 from snoh666/master

Add support for root name as jsx element

Author: Kikobeats

README.md

@@ -41,7 +41,7 @@ Or add to your package.json config file:
 Name|Type|Default|Description
 |:---|:---|:---|:---
 `src`|`JSON Object`|None|This property contains your input JSON
-`name`|`string` or `false`|"root"|Contains the name of your root node.  Use `null` or `false` for no name.
+`name`|`string`|`JSX.Element` or `false`|"root"|Contains the name of your root node.  Use `null` or `false` for no name.
 `theme`|`string`|"rjv-default"|RJV supports base-16 themes.  Check out the list of supported themes [in the demo](https://mac-s-g.github.io/react-json-view/demo/dist/). A custom "rjv-default" theme applies by default.
 `style`|`object`|`{}`|Style attributes for react-json-view container.  Explicit style attributes will override attributes provided by a theme.
 `iconStyle`|`string`|"circle"| Style of expand/collapse icons.  Accepted values are "circle", triangle" or "square".

dev-server/src/index.js

@@ -169,6 +169,13 @@ ReactDom.render(
             groupArraysAfterLength={50}
             src={getExampleJson4()}
         />
+
+        {/* Name as colored react component */}
+        <JsonViewer
+            collapsed
+            name={<span style={{color: "red", fontWeight: 800}}>React Element as name</span>}
+            src={getExampleJson2()}
+        />
     </div>,
     document.getElementById('app-container')
 );

index.d.ts

@@ -12,7 +12,7 @@ export interface ReactJsonViewProps {
    *
    * Default: "root"
    */
-  name?: string | null | false;
+  name?: React.JSX.Element | string | null | false;
   /**
    * RJV supports base-16 themes. Check out the list of supported themes in the demo.
    * A custom "rjv-default" theme applies by default.

package.json

@@ -190,6 +190,7 @@
     "@babel/plugin-syntax-class-properties": "~7.12.1",
     "@babel/plugin-syntax-jsx": "~7.12.1",
     "@babel/register": "7.12.10",
+    "@types/react": "^18.2.20",
     "babel-plugin-react-html-attrs": "~2.1.0",
     "chai": "~4.2.0",
     "css-loader": "~4.3.0",

src/js/components/JsonViewer.js

@@ -5,8 +5,13 @@ import ArrayGroup from './ArrayGroup';
 export default class extends React.PureComponent {
     render = () => {
         const { props } = this;
-        const namespace = [props.name];
+        let namespace = [props.name];
         let ObjectComponent = JsonObject;
+        if (typeof props.name === 'object' && !Array.isArray(props.name)) {
+            // Support Classes and Functional Components
+            const ComponentName = props.name?.displayName || props.name?.name || props.name?.type?.name;
+            namespace = [ComponentName || 'Anonymous'];
+        }
 
         if (
             Array.isArray(props.src) &&