alexkuz / react-json-tree

React JSON Viewer Component, Extracted from redux-devtools

---

This package was merged into redux-devtools monorepo. Please refer to that repository for the latest updates, issues and pull requests.

---

react-json-tree

React JSON Viewer Component, Extracted from redux-devtools. Supports iterable objects, such as Immutable.js.

Usage

import JSONTree from 'react-json-tree'
// If you're using Immutable.js: `npm i --save immutable`
import { Map } from 'immutable'

// Inside a React component:
const json = {
  array: [1, 2, 3],
  bool: true,
  object: {
    foo: 'bar'
  },
  immutable: Map({ key: 'value' })
}

<JSONTree data={json} />

Result:

Check out examples directory for more details.

Theming

This component now uses react-base16-styling module, which allows to customize component via theme property, which can be the following:

• base16 theme data. The example theme data can be found here.
• object that contains style objects, strings (that treated as classnames) or functions. A function is used to extend its first argument { style, className } and should return an object with the same structure. Other arguments depend on particular context (and should be described here). See createStylingFromTheme.js for the list of styling object keys. Also, this object can extend base16 theme via extend property.

Every theme has a light version, which is enabled with invertTheme prop.

const theme = {
  scheme: 'monokai',
  author: 'wimer hazenberg (http://www.monokai.nl)',
  base00: '#272822',
  base01: '#383830',
  base02: '#49483e',
  base03: '#75715e',
  base04: '#a59f85',
  base05: '#f8f8f2',
  base06: '#f5f4f1',
  base07: '#f9f8f5',
  base08: '#f92672',
  base09: '#fd971f',
  base0A: '#f4bf75',
  base0B: '#a6e22e',
  base0C: '#a1efe4',
  base0D: '#66d9ef',
  base0E: '#ae81ff',
  base0F: '#cc6633'
};

<div>
  <JSONTree data={data} theme={theme} invertTheme={false} />
</div>

Result (Monokai theme, dark background):

Advanced Customization

<div>
  <JSONTree data={data} theme={{
    extend: theme,
    // underline keys for literal values
    valueLabel: {
      textDecoration: 'underline'
    },
    // switch key for objects to uppercase when object is expanded.
    // `nestedNodeLabel` receives additional arguments `expanded` and `keyPath`
    nestedNodeLabel: ({ style }, nodeType, expanded) => ({
      style: {
        ...style,
        textTransform: expanded ? 'uppercase' : style.textTransform
      }
    })
  }} />
</div>

Customize Labels for Arrays, Objects, and Iterables

You can pass getItemString to customize the way arrays, objects, and iterable nodes are displayed (optional).

By default, it'll be:

<JSONTree getItemString={(type, data, itemType, itemString)
  => <span>{itemType} {itemString}</span>}

But if you pass the following:

const getItemString = (type, data, itemType, itemString)
  => (<span> // {type}</span>);

Then the preview of child elements now look like this:

Customize Rendering

You can pass the following properties to customize rendered labels and values:

<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.

For labelRenderer, you can provide a full path - see this PR.

More Options

• shouldExpandNode: function(keyName, data, level) - determines if node should be expanded (root is expanded by default)
• hideRoot: Boolean - if true, the root node is hidden.
• sortObjectKeys: Boolean | function(a, b) - sorts object keys with compare function (optional). Isn't applied to iterable maps like Immutable.Map.

Credits

• All credits to Dave Vedder ([email protected]), who wrote the original code as JSONViewer.
• Extracted from redux-devtools, which contained ES6 + inline style port of JSONViewer by Daniele Zannotti ([email protected])
• Iterable support thanks to Daniel K.
• npm package created by Shu Uesugi ([email protected]) per this issue.

Similar Libraries

• react-treeview
• react-json-inspector
• react-object-inspector
• react-json-view

License

MIT

react-json-tree's Issues

Every property is Interpreted as String

There seems to have been a regression somewhere between 0.3.0 and 0.4.0.

In 0.4.0, every property on the object is displayed as a string.

Very cool project by the way. Exactly what I needed for a chrome extension I'm making.

react 0.13 peer dependency fails

With react 0.13.3, this fails with the errors, below. Upgrading to 0.14 latest, it works. I see a previous commit to allow earlier 0.13 versions, so not sure why this isn't working. Is there anything special required to use this with react 0.13? I'm rendering like so:

    <JSONTree data={{foo:'bar'}}/>

and getting these errors with react 0.13.3. No errors with 0.14

Component(...): No `render` method found on the returned component instance: you may have forgotten to define `render` in your component or you may have accidentally tried to render an element whose type is a function that isn't a React component.

Warning: Don't set the props property of the React element. Instead, specify the correct value when initially creating the element.

Uncaught TypeError: Can't add property context, object is not extensible

nodeExpanded function

A nice feature would be passing a nodeExpanded property which is a function.

It will get the data and level it has to expand of the current JSONNestedNode. So one needs to pass down nodeExpanded and in addition a level property (which is not exposed). With this function, one could do two things:

• expand up to 2nd level
• do not expand a specific property
• do not expand arrays longer than 10

Does this make sense? I could work on this but first rfc...

deepEqual sometimes creates loop

Uncaught RangeError: Maximum call stack size exceeded
deepEqual @ deepEqual.js:11deepEqual @ deepEqual.js:13deepEqual @ deepEqual.js:13deepEqual @ deepEqual.js:13deepEqual @ deepEqual.js:13deepEqual @ deepEqual.js:13deepEqual @ deepEqual.js:13deepEqual @ deepEqual.js:13deepEqual @ deepEqual.js:13deepEqual @ ........

Basically I have just these objects

x: Object
createdChildNodes: false
expanded: true
__proto__: Object
__defineGetter__: __defineGetter__()
__defineSetter__: __defineSetter__()
__lookupGetter__: __lookupGetter__()
__lookupSetter__: __lookupSetter__()
constructor: Object()
hasOwnProperty: hasOwnProperty()
isPrototypeOf: isPrototypeOf()
propertyIsEnumerable: propertyIsEnumerable()
toLocaleString: toLocaleString()
toString: toString()
valueOf: valueOf()
get __proto__: get __proto__()
set __proto__: set __proto__()

y: Object
createdChildNodes: false
expanded: true
__proto__: Object
__defineGetter__: __defineGetter__()
__defineSetter__: __defineSetter__()
__lookupGetter__: __lookupGetter__()
__lookupSetter__: __lookupSetter__()
constructor: Object()
hasOwnProperty: hasOwnProperty()
isPrototypeOf: isPrototypeOf()
propertyIsEnumerable: propertyIsEnumerable()
toLocaleString: toLocaleString()
toString: toString()
valueOf: valueOf()
get __proto__: get __proto__()
set __proto__: set __proto__()

guess they are just equal

How do you set the root to be closed by default?

Can you please explain how to use the 'shouldExpandNode' prop? An example would be useful in this case. Thanks!

Object preview option?

Currently when a node is collapsed and contains an object or array, by default it will show something like 3 keys or 4 items. This is decent default and given that you can override getItemString users can do pretty much what ever they want.

That said I'm wondering if there is any interest in providing a "preview" mode as an option out fo the box. Obviously the below is just a sketch of what could be done, but I just wanted to prototype something to see if there was interest before investing more time.

Let me know.

const getItemString = (function() {
    function dataType(data) {
        return Object.prototype.toString.call(data).slice(8, -1);
    }
    function nodeValue(item) {
        const type = dataType(item);
        let color = themeJSONTree.extend.base0B;
        if (type === 'Array' || type === 'Object') {
            color = '#72b252'; // TODO: make a theme color
            item = type;
        }
        else if (type === 'Number' || type === 'Boolean') {
            item = String(item);
            color = themeJSONTree.extend.base09;
        }
        else if (type === 'String') {
            item = '\'' + item + '\'';
        }
        else {
            if (item === null || item === undefined) {
                color = themeJSONTree.extend.base08;
            }
            item = String(item);
        }
        return <span style={{color}}>{item}</span>;
    }
    function rootArray(data, itemString) {
        const components = [ '[ ' ];
        for (let i = 0; i < data.length; i++) {
            if (i === 4) {
                components.push(', ...');
                break;
            }
            if (i > 0) {
                components.push(', ');
            }
            components.push(nodeValue(data[i]));
        };
        components.push(' ] - ');

        // add item string
        components.push(<span style={{ color: themeJSONTree.extend.base08 }}>{itemString}</span>);

        return components;
    }
    function rootObject(data, itemString) {
        const components = [ '{ ' ];
        let i = 0;
        for (let key in data) {
            if (key !== undefined) {
                if (i++ === 4) {
                    components.push(', ...');
                    break;
                }
                if (i > 1) {
                    components.push(', ');
                }
                components.push(<span>{key}: {nodeValue(data[key])}</span>);
            }
        }
        components.push(' } - ');

        // add item string
        components.push(<span style={{ color: themeJSONTree.extend.base08 }}>{itemString}</span>);

        return components;
    }

    return function(type, data, itemType, itemString) {
        let result = undefined;
        if (type === 'Array') {
            result = rootArray(data, itemString);
        }
        else if (type === 'Object') {
            result = rootObject(data, itemString);
        }
        else {
            result = <span>{itemType} {itemString}</span>;
        }
        return result;
    };
})();

value overflow

Hi! I noticed a small bug when working on an API that returns a huge hash URL. The value overflows horizontally with scroll (expected behavior I presume, but maybe wrapping would be better? It would in this instance but maybe not always), but the background color does not grow with it.

Error objects cannot be expanded + Fix for #20

Error objects in the state tree cannot be expanded. Thats because iterating with for...in and hasOwnProperty doesn't work here. However this should easily be fixed by adding this before line 30 in JSONObjectNode.js:

if (data instanceof Error) {
    data = Object.getOwnPropertyNames(data).reduce(function (errorObj, prop) {
        errorObj[prop] = data[prop];
        return errorObj;
    }, {});
}

In addition, to solve Objects without prototype chain are broken #20 , line 32 in JSONObjectNode.js could be changed to:

if (Object.getPrototypeOf(data) === null || data.hasOwnProperty(key)) {

(IMHO thats better than PR Fixes #20, expanding of objects without prototype #21.)

I would create a pull request, but I cannot test this, because I cannot build the package. (I cloned it from github, but get lot's of errors on npm install, npm build and npm run lint. Even after fixing npm install and npm build (by removing all the carets from the dependency versions in package.json and installing [email protected]), with npm build the output in lib looks different from what I get from npm install react-json-tree.)

But I'm sure someone can do it. :)

Hide function definitions in state

We are using seamless-immutable which adds functions like merge, 'update`, etc.. into the state object. In the Redux Log Monitor these functions are showing in the panel. Is there a way to hide these?

propTypes is deprecated

React has deprecated their own propTypes and will remove it in v16. Use the prop-types package instead.

warning/error in example with typescript

When following the example, typescript shouts at me:

JSX element type 'JSONTree' does not have any construct or call signatures.

get name property and key on valueRenderer

It is possible to obtain the name of the property and the key of the property in labelRenderer and valueRenderer

I try passed delta diff [https://github.com/benjamine/jsondiffpatch], I need key for get change on delta

delta: is a array diffs of json

Reference to Symbol breaks IE11

After starting to use redux-devtools, I noticed my app was broken in IE11, caused by the unguarded typeof obj[Symbol.iterator] === 'function' check in obj-type.js

Guarding the check with typeof Symbol !== 'undefined' would make for a quick fix.

Edit: I've just spotted that PR #2 is intended to fix this.

Needs Tests!

Thanks !

Really cool component, thanks for taking the time to build and maintain it !

Cheers !

CSS Styling Help

I'm trying to style my component using a className but I'm having no success.
The theme section of the README is a little confusing and doesn't specify the target HTML tags or classes for styling.

I would like to represent the sample below using CSS

<JsonTree 
 data={data} 
 hideRoot={true} 
 theme={{base00: '#000', base0B: brand.primaryColor, base0D: '#999'}} />

`shouldExpandNode` is only calculated on mount vs. update

Example (notice how logs are only printed to the console after a nested node is unmounted and re-mounted, that is when shouldExpandNode is called):

I'm trying to implement a filter for the data JSON tree so that users can easily navigate to leaf nodes, but shouldExpandNode is only calculated in the constructor of JSONNestedNode, so when the data in JSONTree changes, shouldExpandNode doesn't update unless a JSONNestedNode is unmounted and re-mounted.

sortObjectKeys={true} can't be used on firefox

sortObjectKeys={true} can't be used on firefox, firefox version is 53.0.3 (64 bit) of OSX.
It is working on chrome.

Theme not applied in v.0.10.0

Theme styles (schemes and isLightTheme) not applied correctly in version 0.10.0

All is working after downgrading to the version 0.9.0

Version 0.10.8 ships unnecessary artifacts

Hi @alexkuz,

it looks like something went wrong during the last release. The release on npm includes a packages/react-json-tree-demo-app folder of 71 MB.

This makes our build fail due to flow errors: https://travis-ci.org/nteract/hydrogen#L178

Override ItemRange Styling

I have an Object containing 52 keys whose values are all different types.
When I render this object through to a JSONTree, I will see the following expandable element:
>> 46...48

I want to force that object to always be expanded, regardless of how large the overall object ends up being. And in this example, we're only hiding 3 small entries...which seems silly. By the way, the showObjectKeys key does not enforce the behavior I'm looking for.

If there's a way to accomplish this with the styling options, I absolutely cannot find it. I'd love any help or insight here!

Cannot GET /

Trying to colaborate I got this:

MacBook-Air-de-Cesar:react-json-view cesar$ npm run dev:hot

> [email protected] dev:hot /Users/cesar/Documents/www/react-json-view
> webpack-dev-server

Project is running at http://0.0.0.0:2000/
webpack output is served from /
Content not from webpack is served from /Users/cesar/Documents/www/react-json-view/dist
404s will fallback to /index.html
Hash: d7f28ca4de320063890f
Version: webpack 2.6.1
Time: 8235ms
  Asset     Size  Chunks                    Chunk Names
main.js  4.15 MB       0  [emitted]  [big]  main
chunk    {0} main.js (main) 1.49 MB [entry] [rendered]
    [4] ./~/react/react.js 56 bytes {0} [built]
   [12] ./src/js/themes/getStyle.js 10 kB {0} [built]
   [69] ./src/js/helpers/util.js 735 bytes {0} [built]
  [117] ./src/js/stores/ObjectAttributes.js 3.14 kB {0} [built]
  [190] (webpack)/hot/emitter.js 77 bytes {0} [built]
  [191] ./src/js/index.js 7.13 kB {0} [built]
  [192] (webpack)-dev-server/client?http://0.0.0.0:2000 5.68 kB {0} [built]
  [193] (webpack)/hot/dev-server.js 1.57 kB {0} [built]
  [204] ./src/js/components/JsonViewer.js 2.9 kB {0} [built]
  [514] ./~/strip-ansi/index.js 161 bytes {0} [built]
  [517] ./~/url/url.js 23.3 kB {0} [built]
  [519] (webpack)-dev-server/client/overlay.js 3.73 kB {0} [built]
  [520] (webpack)-dev-server/client/socket.js 897 bytes {0} [built]
  [523] (webpack)/hot/log-apply-result.js 1.02 kB {0} [built]
  [524] multi (webpack)-dev-server/client?http://0.0.0.0:2000 webpack/hot/dev-server ./src/js/index.js 52 bytes {0} [built]
     + 510 hidden modules

WARNING in EnvironmentPlugin - NODE_ENV environment variable is undefined.

You can pass an object with default values to suppress this warning.
See https://webpack.js.org/plugins/environment-plugin for example.
webpack: Compiled with warnings.

I solve the issue running NODE_ENV='development' npm run dev:hot

But in the browser (localhost:2000) for both scenarios i got this response:
Cannot GET /

Objects without prototype chain are broken

When objects are created via Object.create(null) they cannot be expanded and the object properties are not shown due to Uncaught TypeError: obj.hasOwnProperty is not a function.
The problematic part is in https://github.com/chibicode/react-json-tree/blob/master/src/JSONObjectNode.js#L32 where it is assumed that hasOwnProperty is always present.

Can I load this package from CDN?

I tried to find a CDN link for this package, but I couldn't. Please let me know if you know the way to load this package from CDN. Thanks.

Tree component on list at jsp

Some improvement proposals

1. Get rid of previousData prop. If I got it right, this prop is used to highlight changed data. To me this behaviour looks too specific - I guess user should be able to apply style himself if he needs to.
2. Better theming. I've added getLabelStyle etc. methods some time ago, but I'm not happy about them :) I like the approach I used in redux-devtools-insopector more, which is based upon react-themeable solution with an extension for base16 theming:
3. if theme is an object with baseNN keys, it is treated as base16 theme and is used with default styles;
4. if theme has string values, they're considered classnames;
5. if values are objects, they're considered styles.

If there's a necessity, we can also allow functions as values (to provide type and expanded parameters in out case), though I'm not 100% sure about that.

The signature would be like this then:

createStyling(theme: Object, createDefaultStyles: Function, key: String, ...args) -> { style: { ... }, className: '...' }

// which can be splitted, if we use currying:

const styling = createStyling(theme, createDefaultStyles);

return (
  <div {...styling('item', type, expanded)>
    <div {...styling('label', type, expanded)}></div>
    <div {...styling('value', type, expanded)}></div>
  </div>
);

What do you think? @gaearon @chibicode

JSONTree expands when loaded from localhost, not from external IP address

I'm using react-json-tree 0.6.1 with node 5.3.0, npm 3.3.12 on OSX 10.10.5 and Chrome (recent).

The site works perfectly if I access it from localhost:3000. Going to my computer's external address (say, 192.168.254.13:3000) the app works fine except that react-json-tree items do not expand (!) Clicking the twisty triangle does not change the appearance - it stays collapsed.

I confess I didn't read much of the documentation - I just slapped the <JSONTree... /> component in place, and it worked right away.

Any ideas how to troubleshoot this? Thanks.

Dates aren't displayed

There's no JSONDateNode to display Date values.

This would make an excellent First Timers Only Pull Request

State tree collapses automatically

State tree collapses automatically
version: 2.12.2.1
I return a state like I normally / always have
no errors
and yet when I open a leaf in the dev tool state tree, and dispatch new action, it closes up :(

(correct me if I am wrong, but state tree is suppose to be persistent across dispatches ?)

can someone investigate?

reference:
zalmoxisus/redux-devtools-extension#286 (comment)

Angular 2 Kitchen sink: http://ng2.javascriptninja.io
and source@ https://github.com/born2net/Angular-kitchen-sink
Regards,

Sean

the example can't run successfully

after npm install & npm start

it show

Module build failed: ReferenceError: Unknown plugin "transform-decorators-legacy" specified in "/Users/HolaMan/Projects/react-json-tree/.babelrc" at 0, attempted to resolve relative to "/Users/HolaMan/Projects/react-json-tree"
at /Users/HolaMan/Projects/react-json-tree/examples/node_modules/babel-core/lib/transformation/file/options/option-manager.js:177:17
at Array.map (native)
at Function.normalisePlugins (/Users/HolaMan/Projects/react-json-tree/examples/node_modules/babel-core/lib/transformation/file/options/option-manager.js:153:20)
at OptionManager.mergeOptions (/Users/HolaMan/Projects/react-json-tree/examples/node_modules/babel-core/lib/transformation/file/options/option-manager.js:245:36)
at OptionManager.init (/Users/HolaMan/Projects/react-json-tree/examples/node_modules/babel-core/lib/transformation/file/options/option-manager.js:360:12)
at File.initOptions (/Users/HolaMan/Projects/react-json-tree/examples/node_modules/babel-core/lib/transformation/file/index.js:223:65)
at new File (/Users/HolaMan/Projects/react-json-tree/examples/node_modules/babel-core/lib/transformation/file/index.js:140:24)
at Pipeline.transform (/Users/HolaMan/Projects/react-json-tree/examples/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
at transpile (/Users/HolaMan/Projects/react-json-tree/examples/node_modules/babel-loader/index.js:14:22)
at Object.module.exports (/Users/HolaMan/Projects/react-json-tree/examples/node_modules/babel-loader/index.js:88:12)
@ ./src/App.js 13:11-31

Use of React 15.1.0 breaks redux-devtools-inspector

Thanks so much for the updates and upgrades first of all!

I am using 15.1.0 as part of my production build (it's sadly fixed and we can't upgrade to a newer version) and we also use version 0.9.4 of redux-devtools-inspector. This has a dependency of ^0.10.0 on react-json-tree (which has been recently updated to 0.10.6), which in turn has updated the peerDependencies to 15.3.0 (which we sadly can't update to 😢).

Is it possible to have this version as 0.11.0, or a way that we don't have to upgrade our React version at all?

Unnecessary (non-dev)dependency on babel-plugin-transform-runtime

It looks like the "babel-plugin-transform-runtime" dependency could be a devDependency instead.

Invariant Violation: Minified React error

Wonderfull tool. Thanks

I got error with <ReactJson src={[new Date(),new Date()]} />

I I really have performance problem if I display several (250) ReactJson components (with small objects)

thanks and sorry for my english

Does not correctly handle immutable objects when hideRoot is false

Issue is here: https://github.com/chibicode/react-json-tree/blob/master/src/index.js#L81-L105

The getChildNodes function does not consider if the object of type immutable and breaks the detection in obj-type.js. An easy fix would be an if objType(value) === 'Iterable' somewhere in that function but I haven't submitted a PR because I have a feeling you'd want it done a bit more carefully.

Feature request: keyboard accessibility

First, thanks for such a solid library - this is great!

Second, can keyboard accessibility be added to the click-able / tap-able areas? Would there be a problem with making the accordion collapsible elements into <button> elements with reset styles? These ones:

So that the nodes are keyboard accessible.

On-field-click event

Are there any plans to add on-field-click event? There are only 3 types of events (edit, add, delete). I was wondering if it will be possible to handle on click event in future.

Does not display well with custom line-height

This is a minor nit but while working on an update to bvaughn/redux-devtools-filterable-log-monitor I noticed that custom line-heights cause the JSON tree to display poorly.

Default browser line-height (eg. 20px)

#### Custom line-height (eg. 40px)

I think the "best" fix for this would be to use flexboxes to layout row items instead of using things like top margins for vertical alignment, etc. If you're interested- I'd be happy to put together a PR that addresses this. :)

How to make the tree in a fixed heigh with a vertical scrollbar?

I tried to add below css on the parent of <JSONTree> dom to make it in a fixed height with a vertical scrollbar but it doesn't work. How can I make it since the json data could be very large?

overflow-y: auto;
height: 800px;

Missing changelog for last few releases

I wanted to update https://github.com/gaearon/redux-devtools-log-monitor to use 0.5.0 but couldn't find the release notes for 0.4.x and 0.5.x. I'm especially interested in breaking changes (as I presume there are some because minor bumped while still on 0.x—were there any?)

Unnecessary CSS stacking context (json shows in front of `position: xxx;` elements)

When rendering JSONTree on a page with absolute/fixed/sticky positioned elements, this will mess up the CSS stacking context, so some of the JSONTree elements that should have been part of the static content now appear in front of the absolute/fixed/sticky element like this:

reproduction

https://jsfiddle.net/Aprillion/8ohn09yx/

const App = () =>
  <div style={{height: '200vh'}}>
    <h1 style={{position: 'sticky', top: 0, background: 'yellow'}}>sticky header</h1>
    <div className="json">
      <JSONTree data={{a: {b: 0}}} />
    </div>
  </div>

workaround

.json * {
  position: static !important;
  transform: none !important;
}

Undefined values are not presented

It appears that undefined values are not shown at all in the tree, even when our objects have explicitly created keys with this value. But they are being added to the "keys" counter label, so this looks kind of weird - seeing, say, "3 keys" in the counter, but expanded view shows only 2 of them which have defined values.

Looking at the codebase, it's probably a simple fix, so I'll provide a PR with a patch.
Edit: PR: #15

Example that shows the problem:

With the following object:

{
    object: {
        foo: 'bar',
        baz: undefined
    },
    test: {
        my: undefined
    }
}

The actual outcome is shown at the following screenshot:

The expected outcome should be as on the next screenshot:

Support for immutable.js is broken

Per reduxjs/redux-devtools#265 react-json-tree seems to be causing immutable state trees to not display correctly in redux-devtools.

Using version 0.5.0 (known good version):

Using version 0.6.5 (broken version):

I ran git bisect, starting with the two commits above, and it found the following result:

react-json-tree ((0f65000...)|BISECTING) $ git bisect bad
0f65000 is the first bad commit
commit 0f65000
Author: Kuzya [email protected]
Date: Sat Feb 27 23:50:46 2016 +0300

recursive collapsing for huge collections

:100644 100644 59bba58906c2502e8f582a7ac586a3831a65e6cb 9bf24bf8f54c432412c4cde6647d44bdbe3a8fc0 M package.json
:040000 040000 5b97119e946ad7b78d148f7b1a1ae1308eb51adb c44859802f2a72a92f57fd1542fd76210e1cb9db M src

Why force user-select: none?

I sometimes want to select part of store's state or actions and copy them paste into other place (maybe for search), but select and copy is disabled by user-select: none. Are there any concerns about this?

Feature: Display keys sorted

Would be nice if the keys are sorted

JSONArrow icon being rendered with blue background in Edge

See here for details on the issue in Edge: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11844964/

This is affecting react-json-tree (somewhat inadvertently, sorry, not your fault!)

Here's where the unicode char is used: https://github.com/alexkuz/react-json-tree/blob/master/src/JSONArrow.js#L16

And the fix would be adding a rule such as font-family: 'Segoe UI Symbol', sans-serif to that icon's wrapper div.

Library request in cdnjs

Hi,
There is a library request in cdnjs.
To contain the library correctly, I would like to check the files needed to be added.

The files I plan to add is:
all files in /src ( including /src/utils and /src/themes )

Are they complete for users? Or other files required? Or some files not required?

Thank you for your great work!

Allow any root node?

Right now the library only allows the root node to be an object or an array node, and any other value renders empty. Is this intentional, or would it be helpful to be able to display any value as the root node (surely at the very least adding capability for a JSONIterableNode as root)?

Editable fields

Is there any plans on this ?

Add collectionLimit description to README

Would be nice if one could hide the root node

So I am not interested in displaying the root node. It would be nice being able to just display all properties .