This package was merged into redux-devtools
monorepo. Please refer to that repository for the latest updates, issues and pull requests.
React JSON Viewer Component, Extracted from redux-devtools. Supports iterable objects, such as Immutable.js.
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} />
Check out examples directory for more details.
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 extendbase16
theme viaextend
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>
<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>
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:
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.
shouldExpandNode: function(keyName, data, level)
- determines if node should be expanded (root is expanded by default)hideRoot: Boolean
- iftrue
, the root node is hidden.sortObjectKeys: Boolean | function(a, b)
- sorts object keys with compare function (optional). Isn't applied to iterable maps likeImmutable.Map
.
- 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.
MIT
react-json-tree's People
Forkers
jasisk evansimpson ioss pbomb mdziekon davegw gaearon jjjjw bvaughn duncanfinney martinhoefling vinspee daimagine axelson codeheroics kompot hsbacot bakery xyc ajchambeaud dremio mclin rexfordkelly-on-react-native sevki reebalazs philliphoff oflisback viktorijat gnestor jlhwung yechunxiao19 remolueoend travisjeffery solepano chrsdietz changshazhou zalmoxisus manikanta-kotha lgeiger kikonejacob callumsong nerdalize jpokrzyk shridhad soulman-is-good borm balthazar nachiket-p stefanyohansson mac-s-g doudou2020 xilibro som2y yozzh steveliles guillaumecisco ql434 rsolomon ulisesbocchio kinjal-gandhi fauzinasreddine wooodhead kvolkovich-sc bikashmstha digitaledge nano2nd pashazz leland-kwong mig38m nhunzaker jonekee asyncanup jeremypeters devpkiconix jacqt gyujincho luccacabra pr0con janpaul123 umibose shayelkana slavasitnikov sigma-random leo486597 dendisuhubdy 3crazyspecial mastermann appgyver ovesta viphuangwei turenc itsfadnis zhangyuxin777 ravisojitra therakeshpurohit luispadre amazingcoding svikashk kinker5 kallipatttireact-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
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
- 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.
- Better theming. I've added
getLabelStyle
etc. methods some time ago, but I'm not happy about them :) I like the approach I used inredux-devtools-insopector
more, which is based uponreact-themeable
solution with an extension forbase16
theming: - if
theme
is an object withbaseNN
keys, it is treated asbase16
theme and is used with default styles; - if
theme
hasstring
values, they're considered classnames; - 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
}
}
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 .
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.