react-json-view
react-json-view copied to clipboard
[Feature request] Add options to handle big input
This is a very imprecise issue.
The component takes lots of time/resources to render huge JSONs and can bring the page to a crawl (with reason).
I was starting to implement some manual checks to avoid that (e.g. "if input is an array longer than 20 elements, only jsonview the first 20, and add button to copy the full thing to clipboard", but then I end up re-implementing things (e.g. clipboard handling :) that are already being nicely done in your component :-/
→ What about handling big input in the component? Behavior could be configured by a new prop onBigInput: [render, renderFirstN, dontRender], and on partial or no render, the copy-to-clipboard link for the root item could copy the whole input.
Or, taking a step back: am I missing something? Any other suggestion / existing feature I should look at?
Thoughts?
I know there's plenty of room for performance improvements. I'm interested in finding ways to boost performance without adding additional props. Are there ways we can be smart with large inputs entirely under the hood?
However, I'm definitely open to reviewing and merging PR's that address a community need.
@mac-s-g are you doing any virtualization (i.e only rendering the part that's visible on the screen plus a little extra, and then rendering on-the-fly when scrolling)? Because if you're rendering the entire document always, that's most likely the problem. I have used react-virtualized to solve this in a past project.
@tzachshabtay can we use react-json-view with react-virtualized? Any sample would be very helpful !
@killjoy2013 not that I know of. My suggestion was to use react-virtualized inside this project to solve this issue (assuming the issue is because of missing virtualization, I don't know if that's true).