mac-s-g / react-json-view Goto Github PK

issue to track progress of add/delete functionality

I have a modal the body contain a reactjson object

<ReactJson
src={jsonData}
theme={'monokai'}
Collapsed={false}
name={null}
/>

When I l click the copy button, there is no problem, but nothing is really get copied. Do I need to enable other thing in order to make it work, thanks

Trying to Contribute 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 /

It would be a great solution for generating rest API tryout consoles if JSON schema support is added. I am aware of react-jsonschema-form but I think generating forms is overkill for some use cases.

Empty arrays and objects should not be expandable. It adds excess height to the tree and clutters the UI. This is especially relevant on a tree that is pre expanded.

Removing the dots from inside the curly braces or brackets ([] or {}) in the UI and making it unexapndable will much more clearly communicate the fact its empty.

The top is an example on how I suggest it should be displayed and the bottom is how it is displayed currently.

There's only 'validation error' if src data is not valid.
I want to put custom message make sure to our country's client as our language.
So, custom error message is necessary to notify validation error for other language.

Thank you for considering my opinion :)

Hi, I'm a fans of 'react-json-view', it's very cool and beautiful.

But the chrome don't respond when I want to render huge object. I think it's will be great to add a callback to decide whether to collapse a node depends on the index and the depth of the node.

From the latest version, server-side rendering produces following issue

ReferenceError: window is not defined
at C:\Users\hnhatr\Downloads\reactGo-master\node_modules\react-json-view\dist\main.js:1:150552
at C:\Users\hnhatr\Downloads\reactGo-master\node_modules\react-json-view\dist\main.js:1:150507
at e.exports (C:\Users\hnhatr\Downloads\reactGo-master\node_modules\react-json-view\dist\main.js:1:151009)
at Object. (C:\Users\hnhatr\Downloads\reactGo-master\node_modules\react-json-view\dist\main.js:1:146201)
at t (C:\Users\hnhatr\Downloads\reactGo-master\node_modules\react-json-view\dist\main.js:1:377)
at Object.defineProperty.value (C:\Users\hnhatr\Downloads\reactGo-master\node_modules\react-json-view\dist\main.js:1:41330)
at t (C:\Users\hnhatr\Downloads\reactGo-master\node_modules\react-json-view\dist\main.js:1:377)
at Object.defineProperty.value (C:\Users\hnhatr\Downloads\reactGo-master\node_modules\react-json-view\dist\main.js:1:39991)
at t (C:\Users\hnhatr\Downloads\reactGo-master\node_modules\react-json-view\dist\main.js:1:377)
at t.exports (C:\Users\hnhatr\Downloads\reactGo-master\node_modules\react-json-view\dist\main.js:1:734)
at C:\Users\hnhatr\Downloads\reactGo-master\node_modules\react-json-view\dist\main.js:1:744
at n (C:\Users\hnhatr\Downloads\reactGo-master\node_modules\react-json-view\dist\main.js:1:81)
at Object. (C:\Users\hnhatr\Downloads\reactGo-master\node_modules\react-json-view\dist\main.js:1:253)
at Module._compile (module.js:569:30)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:503:32)
at tryModuleLoad (module.js:466:12)
at Function.Module._load (module.js:458:3)
at Module.require (module.js:513:17)
at require (internal/module.js:11:18)
at Object. (C:\Users\hnhatr\Downloads\reactGo-master\compiled\webpack:\external "react-json-view":1:1)
at webpack_require (C:\Users\hnhatr\Downloads\reactGo-master\compiled\webpack:\webpack\bootstrap deda87cb735796675547:19:1)

help me please !!!

When I import this component in React 0.14.8, it throws the error below

Uncaught TypeError: Super expression must either be null or a function, not undefined
    at i (main.js?bdd0***********************:formatted:1)
    at main.js?bdd0***********************:formatted:1
    at Object.defineProperty.value (main.js?bdd0***********************:formatted:1)
    at p (main.js?bdd0***********************:formatted:1)
    at r (main.js?bdd0***********************:formatted:1)
    at Object.defineProperty.value (main.js?bdd0***********************:formatted:1)
    at p (main.js?bdd0***********************:formatted:1)
    at r (main.js?bdd0***********************:formatted:1)
    at Object.defineProperty.value (main.js?bdd0***********************:formatted:1)
    at p (main.js?bdd0***********************:formatted:1)

Hi Again 😄

I would like to collapse by default until a certain depth of the JSON tree.

Suggestion: Change collapsed prop to allow numbers, and if a number is inserted - Expand until the given depth, for example : 0 - collapse all (including root), 1 - expand root, 2 - expand root and direct descendants, etc...

Can we have the option to enable Copy to clipboard for the properties value too within an object?
Currently it is enabled only for objects.

Currently, the collapsed property accepts either a bool or a number. It would be great if we could provide a function of the form (path: string) => boolean do decide what to collapse. Where it would typically be called with .foo.bar if I have an object structure like {foo: {bar: {....}}}. This way I would be able to create simple rules like "everything that starts with _ should be collapsed.

For arrays the path should be [2].bar for instance.

How can I highlight json like
123
Or
"random string"
because these are valid JSONs.

Thank you!

Reproducing the bug

1. Get a react json view element with data in it in a default un-collapsed state
2. Collapse the root
3. Change the data source
4. EXPECT data changes but collapsed state remains
   5 OBSERVE data changes but collapsed state is not remembered

In english, it seems that changing the data forgets the collapsed state. This makes sence since there is no guarantee the new data has the same keys to collapse on, but if the root is collapsed, changing the data should remember that...

Is it possible to edit a key name on an object?

In my project, react-json-view is the 3rd largest dependency, as measured by webpack stats. It's 172KB, minified. It's second only to react-bootstrap (459KB) and react-dom (238KB).

I was surprised by this, so I looked into it a bit, and it appears that Radium is 66KB, but I can't find any other explanation for why react-json-view takes 172KB of JS code.

I thought I would log this as a bug just in case there was some accidental oversight, and you didn't realize the project was so big.

Thanks for what you do. My team loves the react-json-view look! It's fantastic.

Steps to repro:

• Load a JS object as src on ReactJSON
• Click a field to edit. Note that the textarea is empty with the placeholder "update this value"
• Put the new value in and update.
• Click the same field to edit again. Note that the textarea is populated with the new value.

When running this in the debugger, I noticed that the state.editValue === "" rather than the string value I would expect.

Thanks for the maintenance work!

• when in edit mode I would like a property value to be changed after pressing return key (now it's only mouse supported) and to be cancelled after pressing escape key.
• I would like also to be able to enter edit mode by double clicking either property key or property value
• how to rename a key of property? ;(
• it would be nice if tab key (or arrows, whatever) allowed for navigating between properties

I'm really missing the ability to be able to edit the raw JSON. Would be nice to have a switcher in the upper-right corner, which would change to a textarea and vice versa.

While debugging my projects bundle size, this module came in as the largest dependency.

I had a look and noticed that react and react-dom are included in the bundle for rjv:

$ webpack --json | webpack-bundle-size-analyzer
react-dom: 538.5 KB (45.0%)
react: 82.47 KB (6.88%)
radium: 63.25 KB (5.28%)
inline-style-prefixer: 56.87 KB (4.75%)
react-tooltip: 49.97 KB (4.17%)
core-js: 36.45 KB (3.04%)
lodash.curry: 35.03 KB (2.92%)
fbjs: 30.79 KB (2.57%)
create-react-class: 27.71 KB (2.31%)
prop-types: 23.38 KB (1.95%)
base16: 22.03 KB (1.84%)
bowser: 17.29 KB (1.44%)
clipboard: 15.31 KB (1.28%)
lodash.flow: 11.37 KB (0.949%)
react-icons: 10.49 KB (0.875%)
react-base16-styling: 9.73 KB (0.812%)
events: 8.13 KB (0.679%)
flux: 7.46 KB (0.623%)
process: 5.29 KB (0.442%)
pure-color: 3.45 KB (0.288%)
good-listener: 3.37 KB (0.282%)
babel-runtime: 3.29 KB (0.275%)
object-assign: 2.06 KB (0.172%)
react-icon-base: 1.95 KB (0.163%)
delegate: 1.82 KB (0.152%)
tiny-emitter: 1.53 KB (0.128%)
classnames: 1.08 KB (0.0898%)
select: 1 KB (0.0836%)
exenv: 863 B (0.0703%)
webpack: 597 B (0.0487%)
hyphenate-style-name: 339 B (0.0276%)
<self>: 125.14 KB (10.4%)

Note: The file sizes are calculated before minification, and might not reflect the real file sizes in the production bundle.
Done in 10.84s.

I feel like they could instead added as externals, as it'd be implied that if someone wanted to use this component, that they should be including React/ReactDOM themselves:

  externals: {
    'cheerio': 'window',
    'react': 'React',
    'react-dom': 'ReactDom',
    'react/lib/ExecutionEnvironment': true,
    'react/lib/ReactContext': true,
  },

After analysis:

$ webpack --json | webpack-bundle-size-analyzer
radium: 63.25 KB (12.3%)
inline-style-prefixer: 56.87 KB (11.0%)
react-tooltip: 49.97 KB (9.70%)
core-js: 36.45 KB (7.08%)
lodash.curry: 35.03 KB (6.80%)
prop-types: 22.51 KB (4.37%)
base16: 22.03 KB (4.28%)
bowser: 17.29 KB (3.36%)
clipboard: 15.31 KB (2.97%)
lodash.flow: 11.37 KB (2.21%)
react-icons: 10.49 KB (2.04%)
react-base16-styling: 9.73 KB (1.89%)
events: 8.13 KB (1.58%)
flux: 7.46 KB (1.45%)
fbjs: 4.71 KB (0.914%)
pure-color: 3.45 KB (0.670%)
good-listener: 3.37 KB (0.655%)
babel-runtime: 3.29 KB (0.639%)
react-icon-base: 1.95 KB (0.379%)
delegate: 1.82 KB (0.354%)
tiny-emitter: 1.53 KB (0.297%)
classnames: 1.08 KB (0.209%)
select: 1 KB (0.195%)
exenv: 863 B (0.164%)
webpack: 597 B (0.113%)
hyphenate-style-name: 339 B (0.0643%)
<self>: 125.23 KB (24.3%)

Note: The file sizes are calculated before minification, and might not reflect the real file sizes in the production bundle.
Done in 7.34s.

What do you think?

We would like to shade alternate rows and I am trying to determine what selectors I can use for this.

Is there support typescript definitions?

rjv now support copy, but do you have a plan to support paste?

I have an object that looks like this :

I would like to remove the "root" object name so it'll look more like the source json :

{
   "time":"7/4/2017, 10:07:00 A ...",
   "created_at":"Tue Jul 04 07:06:58 ...",
   "id":882133618931286000,
   "id_str":"882133618931286016",
   "text":"https://t.co/6S1JWqQ ...",
   "display_text_range":[...],
   "source":"....",
   "truncated":false,
   "in_reply_to_status_id":null,
   "in_reply_to_status_id_str":null,
   "in_reply_to_user_id":null,
   "in_reply_to_user_id_str":null,
   "in_reply_to_screen_name":null
}

bundle.js:2343 Warning: t.componentWillReceiveProps(): Assigning directly to this.state is deprecated (except inside a component's constructor). Use setState instead.
printWarning @ bundle.js:2343
warning @ bundle.js:2367
callComponentWillReceiveProps @ bundle.js:24918
updateClassInstance @ bundle.js:25090
updateClassComponent @ bundle.js:25340
beginWork @ bundle.js:25716
performUnitOfWork @ bundle.js:27672
workLoop @ bundle.js:27781
callCallback @ bundle.js:17021
invokeGuardedCallbackDev @ bundle.js:17060
invokeGuardedCallback @ bundle.js:16917
performWork @ bundle.js:27901
batchedUpdates @ bundle.js:28352
performFiberBatchedUpdates @ bundle.js:17368
stackBatchedUpdates @ bundle.js:17359
batchedUpdates @ bundle.js:17373
batchedUpdatesWithControlledComponents @ bundle.js:17386
dispatchEvent @ bundle.js:17596

I got this today with react 16 beta 5

(First off, thanks for the great React component!)

I'm not a webpack expert but it looks like the NPM distributed dist/main.js contains embedded source maps for all/many of the dependencies (or more generally, it looks to be a debug build). It's difficult to use react-json-view in a production project of my own because it pulls in that debugging information. Webpack doesn't optimize it back out so my production bundle ends up being 3+ MB larger, making it unusable.

The default height of the text-area is too tall for single line inputs. The text-area should be the same size as the input, and grow as needed. This would also eliminate any jank seen when toggling edit mode.

https://www.reddit.com/r/reactjs/comments/6qz2ig/json_viewer_with_editor/

One of the next enhancements I'm interested in is the ability to add callbacks for hovering over properties and values. Do you think this addition would be suitable for the core library?

I'm thinking something relatively straightforward for the interface:

• onPropMouseOver: callback for hover into JSON object properties
• onPropMouseOut: callback for hover out JSON object propperties
• onValueMouseOver: callback for hovering in over JSON object values
• onValueMouseOut: callback for hover out of JSON object value

However if you have a preference or better idea I'm happy to hear it.

Hey there! Dig the lib, but there's this one nitpick I have. The boolean types (true/false) are title-cased, and I can't think of a reason why, since in JS itself it's all lowercase (and obviously in the JSON objects this component would receive).

I can open up a PR to change it if you'd like 👍

hey.. love your work and curious how you delineate your usage of shell scripts (./docker/, ./entrypoints/) and npm (e.g. "npm run dev-hot"). I'm interested in using some ideas from this repo to organize my own work. Are there pros/cons to running in the docker container?
Always trying to improve my workflow!

(p.s. happy to repost this on stackoverflow or the like)

Hello,
First, thank you for creating this library. I'm hoping it saves me from building a custom json editing solution. It looks like when 'OnEdit' of provided as a prop when you click on the value portion of a property (not object or array) an error is thrown.
Below is from your demo site:
https://mac-s-g.github.io/react-json-view/demo/dist/
Based on the documentation's mention of double click opening the edit text area I suspect it may be that logic that isn't working. Let me know if more information is required or if I'm just not doing it correctly.

EDIT
I was looking through the documentation and I saw there is one last 'on' command, 'onSelect'. If I enable that along with the other 'on' commands I no longer get the error. So good news I won't get hammered by my team for errors and I can still use the library. I hope that information is helpful.

When json data nesting a lot ,the function setState ({json}) will spend a lot of time,even more few seconds,thats should be a bug

In the Features portion of the documentation it says when 'onEdit' is enabled there should be Double-Click Edit Mode.

I'm not getting this functionality with the following usage:

I unsure if it is how I've used the component, not supported, or an issue. Its important when my application is on touch screens as I don't have the 'hover' to show the edit/add/remove icons. Any information would be helpful. Thanks in advance.

Some of {rjv} dependency use deprecated code. You can repeat it even in your own example.
I tried to find that dep, but l it was unsuccessful.

I wanna use you lib, but I can't use libs with deprecations in prod.
Have any idea where is the trouble?

Hi,

I'm using rjv to inspect some collections of complex objects, so I can verify the structure of the data.
Sometimes the content has a large paragraph of text so I have to scroll a lot, and I don't really care for the text, just want to know it's there.

I think there could be a way to expand/collapse large strings, when it's collapsed it only shows the initial chars but can be expanded to reveal the entire content.

What do you think? Would you accept a PR for this?
Would love to contribute.

I'm not sure if this is caused by this component directly, however it is only shown when adding the component in project with React +15.4. Possibly 3rd party package used by this component is causing this.

Warning: Failed context type: Calling PropTypes validators directly is not supported by the prop-types package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types

If you change the src prop and rerender the component it will correctly view the new src. But after a manual edit it will (aside from the manual changed value) restore the initial src prop.

https://codepen.io/shybyte/pen/PKWWqo

I'm already working on a pull request.

snapshot:

maybe the regex rule reason?

Hi there,
I've tried to use your great looking component, and I've encountered the following problem:

It looks like you're rendering each property in object using for-in loop, this leads to every method from the prototype to get rendered on each occurrence of given type as well (in my example Array type). I mean here: https://github.com/mac-s-g/react-json-view/blob/master/src/js/components/DataTypes/Object.js#L191

Any chance for fix?

I've replaced my onEdit and onDelete functions with ones that only call "return false;" and I see that they're called and return false. However, the new src object is replaced with the edited one anyway.

This isn't true of onAdd. If I return false there, the item is not added, and the "New" window stays up. Is there a way to dismiss it and show an error instead?

If the json is big It takes some time to load. So, can we have a callback once the data is ready to show?

Hi.

Is there any support for custom themes? Couldn't find in the readme / source code.

I'm trying out your excellent package, and getting a lot of peer dependency warnings on package install for stuff like, chai, nyc, istanbul, etc. I'm not sure why these are listed as peerDependencies when they are presumably needed only for development. It would help to cut down the noise if those were moved where they belong under devDependencies.

I built a repro using https://esnextb.in/ but it seems that the site's Save function is currently broken.

Repro: https://gist.github.com/MrLeebo/84a3059a7a33993c34567172ec77698f

1. Go to https://esnextb.in/
2. Copy the "code.js" file into the Code tab
3. Copy the "index.html" file into the HTML tab
4. Package tab should auto-populate but you can check it with the "package.json" file
5. Click the "Copy to clipboard" icon. Clipboard does not change
6. If you remove the Modal and simply render the JsonView like normal, the icon works correctly and the clipboard contains the JSON contents

The license file is misnamed (should be LICENSE not LISCENSE`). I suggest correcting it to avoid ambiguity and support tooling which scans dependencies for licenses.

Thank you for a great component! Is there currently a way to display line numbers?

Example....

1 . {
2 .     "check-coverage": true,
3 .     "per-file": false,
4 .     "all": true,
5 .     "lines": 80,
6 .     "statements": 80,
7       "functions": 80,
8      "branches": 80,
9      "require": [
10         "babel-register",
11          "babel-polyfill"
12      ],
13 .   "reporter": [
14         "lcov",
15         "html",
16         "text"
17     ],
18   "cache": true,
19   "report-dir": "./coverage"
20 }

How do I get a particular value say a string from the JSON tree and underline that particular value. I used a ref to access the JSON viewer and tried underlining the particular string but does not seem to work. Is there any other way I can underline text inside the JSON viewer. What I want is to let the user know that the string is a hyperlink.

Wonderfull tool. Thanks

I got error with

<ReactJson src={[new Date(),new Date()]} />

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

thanks and sorry for my english

As title as requested, hope we can pass callbacks to handle selecting the items of JSON object and success copied data.