lapple / react-json-inspector Goto Github PK
View Code? Open in Web Editor NEWReact JSON inspector component
React JSON inspector component
Would be great if I could integrate with : https://github.com/alexkuz/react-json-tree
Any pointers on how I can do it ?
It'd be nice to be able use this with react >= 16
without getting this warning.
(FWIW, I'm using with react 16.8 and it seems to be behaving)
Iff searching in ignore case mode, data will not be highlighted properly
For example have the following json:
{ a: Kuku}
search for 'kuku'
The node will be expanded but not highlighted
JSON specification allows to represent number
and string
types objects, true
, false
and null
values as root object, which isn't supported in react-json-inspector.
E.g. following code fails:
<JsonInspector data={null} />
Following code displays Nothing found
:
<JsonInspector data={123} />
I really like using this to quickly show JSON data while I'm prototyping, but the biggest drawback for me is when I'm using Webpack and all my scripts are transpiled into ES5 javascript but this component is still using JSX in its code I get an error.
I exclude my loaders from parsing the /node_modules folder (a recommended practice with Webpack), but to use this component I have to include your component folder specifically in my loaders.
I feel like this module, and all node modules for that matter, should be transpiled by default into ES5 javascript for compatibility and ease of use.
Hi - thanks for this react json inspector. I'm using in a small project, and it works nicely.
I noticed there is now a filterOptions.ignoreCase on props that was merged on github. Can we get a new version published to npm? Currently the version at npm is 5.1.0.
Thanks!
Joe
please update to v6
v5.4 is not compatible with react 14
A normal thing in react, is to have users enter data and instantly update state across the app. I am using this to monitor this behavior. However, everytime I enter anything, the entire table collapses making it impossible to track changes in realtime.
search speed decreases as log count increases. Is there a solution to this?
Is there a way to do custom rendering like creating a hyperlink or change of color or font of a value on the basis of key data, please let me know if it is possible .
I want to make a data clickable , I am able to do that using callback but I want to highlight the data which is clickable for better visibility. My code :
<Inspector
onClick={object => this.onClick(object)}
data={{ log: this.props.log }}
isExpanded={() => false}
/>
Hello, your last version is not published on npm. (5.4.0 is latest there)
This prevents from using it with react 0.14.x
Could you send a new build up to NPM? Thanks!
Any plans for a standalone js lib or even better, a bower component?
I've had trouble integrating - once I removed the modules local copy of react, everything was fine. :)
Root node is something artificial/virtual in JSON documents, it would be nice to be able to hide it.
currently the inspector only expands the first level. it'd be nice to specify the initial depth that is unfolded.
It doesn't look like there's a way to override basic rendering methods. Is that right, or am I missing something?
What I'd like to do at the moment is just to hide numeric keys (and ":") for Array items, but still show them for Object items. I thought I might try it after rendering (as awful an idea as that is in react), but I'm not sure how to distinguish them by class names or anything.
I know I'm trying to use react-json-inspector as a general json display component, which is presumably beyond its intended use, but it already does close to what I want and I'm using it anyway to help with debugging during development.
Thanks!
I know JSON properties do not have an order.
Anyways, when developing UIs it is important to be consistent. So, every time I render JSON data I would like the order of the fields to be the same. Alphabetically works.
Do you think such a feature is possible?
Warning: ReactDOMComponent: Do not access .getDOMNode() of a DOM node; instead, use the node directly.
Getting this error when using the search
Did the change to work with react 0.14 break comparability with react 0.13?
If not, could the peerDependency be changed to >=0.13.0
If it did, this is a breaking change and should warrant a new major version.
Currently I cannot use version 5.3.0
with react 0.13.x
but with 5.2.1
I could.
Thanks for making this! It's been a great help in my chrome extension development.
Version 4.3.0 does not allow for deep expansion of JSON trees. Version 4.2.2 was not affected by this issue.
If I enable the ignoreCase filter, than only lower case queries will be found.
The bug in the following place:
filterer.js line 68
need to replace 'query' with 'needle'
behaviour can be seen in the live demo
hey, thanks for developing the component :)
my app needs to to display, search and modify json object. do you have anything planned for this? if not, would you accept a proper pull request including such a feature?
Hi,
Awesome work you've done here! I'm very happy using this, and for my use case I'm also thinking a copy to clipboard like this would be nice:
https://github.com/nkbt/react-copy-to-clipboard
Is it possible to add buttons to be rendered inside, beside the search?
Thanks!
This happens when the data prop goes from state: [], to state[{an element}].
Uncaught TypeError: Cannot read property 'length' of undefinedvalidateQuery @ json-inspector.js?2740:38
Version 6.1.2
Is there a way to overide this behaviour, I guess it makes sens for most use case but for documents that have a lot of top level elements it would be nice to have the whole thing collapsed as an option.
react-json-inspector/lib/leaf.js
Line 189 in 34ca624
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.