YYsuni / react18-json-view

JSON viewer for react18
https://jv.yysuni.com/
MIT License
273 stars 24 forks source link

Display size of collapsed arrays/objects #15

Open marcklingen opened 1 year ago

marcklingen commented 1 year ago

I want to show the size of collapsed arrays/objects to help users understand that they can expand it. (I understand that displaySize is wip/canary)

Currently (even when displaySize={true})

Screenshot 2023-09-25 at 18 26 22@2x

Suggestion Screenshot 2023-09-25 at 18 26 59@2x


Thank you for your effort on this, this package is super useful!

marcklingen commented 1 year ago

Is there a smart way to achieve this with customizeNode? If I render a custom element to add the size of the array, I cannot use setFold to change whether it is collapsed

YYsuni commented 1 year ago

This is indeed an issue that I haven't considered, and I will optimize it soon. Thank you for bringing this to my attention.๐Ÿซกโค๏ธ

YYsuni commented 1 year ago

Hi, I have updated it as you suggested, which makes a better experience. You can use it by running npm i react18-json-view@canary, or view the website: https://jv.yysuni.com/. Thanks for the advice.โค๏ธ๐Ÿ˜

marcklingen commented 1 year ago

Hi @YYsuni, thank you, just upgrade and it looks great.

It might be interesting to offer more options:

Example from our app

Screenshot 2023-09-26 at 14 43 05@2x

-> size on collapsed objects is very useful, on expanded ones it is a bit noisy and not necessary

YYsuni commented 1 year ago

You are a genius, I never thought of that before.๐Ÿ˜† , I will do it.

YYsuni commented 1 year ago

Now I have finished it and released the lastest canary version.๐Ÿ™Œ

YYsuni commented 1 year ago

Now it is available in the latest version.

marcklingen commented 1 year ago

Thank you! Already getting positive feedback by users on the new JSON viewer in Langfuse:

good set of UI features: you got me with the ability to copy parts of json!

Added shoutout to our changelog.

YYsuni commented 1 year ago

haha๐Ÿ˜„๐Ÿ˜„ congratualtion!