custom rendering

[Sigfried]

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!

[Sigfried]

I'd also like to do some formatting more easily, so render method overrides would be nice, but just for removing Array index lines, this worked (I'm using d3 rather than jQuery for DOM selection, but it's basically the same):

d3.selectAll('span.json-inspector__key>span')
  .nodes()
  .filter(d=>d.textContent.match(/^\d+$/))
  .map(d=>d.parentNode.parentNode)
  .forEach(d=>d3.select(d).remove())

[Lapple]

Hi, Sigfried, it's good to hear that the published version is almost what you need. What do you think about forking this component and adapting to your application requirements? While it's possible to make many aspects customizable through public configuration, I suspect you could have a long-term benefit from being able to patch the behaviour directly or, for example, remove features that you don't need.

[Sigfried]

Thanks for the invitation, @Lapple. Just to be honest, I'm kind of behind on a project and was looking for the quickest way to display some data nicely, so I probably shouldn't undertake learning and revising an existing library.

BTW, my code above doesn't actually work right. :(