react-json-view
react-json-view copied to clipboard
mac-s-g
customize the style of values inside the viewer
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.
good question. I'm not sure how you would go about doing that at the moment.
what do you think would be a good way to do it? maybe RJV could apply a classname spec and you can apply global styles?
I am not sure how to got about it either as I am new to react and javascript, but I found this https://github.com/alexkuz/react-json-tree#advanced-customization.
Something like this possible??
yea, I could add something like that. it would be a custom style callback. so, given property name, namespace and value, you can apply custom values.
I'll re-purpose this issue as a feature request for custom style callbacks.
Hey! I would also love to use this feature. And in the case of adding styles to an individual value, it would also be useful to add the ability to bring an individual value into view (uncollapse the path to that value if it is currently hidden)?
Not sure how much effort this would entail, but this would be particularly useful for a project at my work. I'd be willing to contribute some time to a PR if this is something you would be willing to add? If not, then just the custom styles portion?
@paulmichaelxd thanks for the feedback. I'm willing to support the custom style feature and I welcome PR's.
I think it's possible to implement the custom collapse behavior via the shouldCollapse callback.
You can use the namespace (path) of a value to inform shouldCollapse when to return true/false. Does that satisfy the requirement to bring individual values into view?
@mac-s-g Yes, shouldCollapse looks like that should satisfy my requirement! Thanks, didn't realize that was an option (I'm a bit new to this package).
Thanks for the quick response & looking forward to the custom style feature!
@mac-s-g Hey again, I was looking into this feature more and I was just curious what you meant by "custom style callback" in your earlier comment. Would we be limited to adding a className to the label/value? Or would it be more like @vignesh-almond 's example: https://github.com/alexkuz/react-json-tree#advanced-customization.
It would be incredibly useful if a rendering function was exposed via props, like in the example, so we could go beyond adding custom styles and even add a popover/tooltip or other interactive elements where each value is.
Maybe this is a bad practice or doesn't mesh well with your designs. Let me know what you think. Thanks!
@paulmichaelxd thanks for pointing me toward the react-json-tree example. I like what they're doing with style customization. I'll take a closer look at what it would take to support something like that as soon as I get some time. Realistically, I'm pretty limited until the weekend after next. I'm always open to community contributions as well.
No worries! I was just curious what you had in mind for this implementation. I'm sure maintaining this is a lot of work, and we all appreciate it a lot!
I'd be happy to take a look at implementing this over the next couple weeks, but I need some time to familiarize myself with everything first since I just recently started using this.
Hi @mac-s-g is this achievable through style? I couldn't find an example for how to use it. I just need to make the NULL values less strong/red on the default theme.
@jonathan-kosgei pretty long time. I am curios if you did achieve this?
