[Feature Request] Customize the styling of the key value pair

[sarath-sasikumar]

Great work on the package !!

I was having a use case, whereby it would be good if we could search the keys in the object and open the corresponding node.

I have managed to do that , using the shouldCollapse attribute but it would have been good if I could somehow highlight the node that I had searched for. Is there any way, we can style a particular node. The use case is not to change the theme but to somehow customize the style of the individual node.

[johnking]

Hi @sarath-sasikumar,

I have the same requirement, do you have any workaround yet?

thanks

[SourceCipher]

Same request goes from me. This component is okay but it lacks customisation.

Would be great if we could have the option how to render each item. For example having a method like renderItems which returns the value of each items in the json. Then you could compare each of them with lets say your search word and chose to render the item or not. And even better if we had a raw value and raw name data management for each row so we could render them the way we want (highlighting for search, making it bold etc).

[snailkn]

same requirement, is there any solution?

[acchaulk]

curious about this as well, would appreciate any workarounds people came up with

[nehagup]

Yea, my usecase is pretty much same. I want to customise some items style based on some conditions. This component is fine, lacks customization.

[Lingam8454]

Need same requirement, I have to highlight specific child JSON nodes. Any other solution?

[Ironolife]

I wrote this workaround for a key I wanted to highlight. Very ugly, but does the job for me :/

// Hightlight value
useEffect(() => {
    const timeout = setTimeout(() => { // Timeout for the node to exist in DOM
        const target = Array.from(document.querySelectorAll('.react-json-view span.object-key'))
            .find((el) => el.textContent === 'keyToFind')
            ?.parentElement
            ?.parentElement
            ?.querySelector('div.variable-value .string-value');

        if (target && target.textContent) {
            (target as HTMLSpanElement).style.backgroundColor = '#16a34a';
            (target as HTMLSpanElement).style.color = '#ffffff';
            (target as HTMLSpanElement).style.padding = '4px';
            (target as HTMLSpanElement).style.fontWeight = '700';
        }
    }, 100);
    
    return () => clearTimeout(timeout);
}, [data]);