Highlight values by a given list of paths

[MykolaGolubyev]

Hello, My scenario requires to highlights certain values within json. Will it be possible to add a new prop like "highlight" with a list of values like ["root.path.el[1]", "root.anotherPath"] so the corresponded values will have a distinct class names or styles assigned to them.

[joshhunt]

You should be able to achieve this through the custom label/value renderer.

<JSONTree
    labelRenderer={raw => <strong>{raw}</strong>}
    valueRenderer={raw => <em>{raw}</em>}
/>

The accept a function that at the end receives the path to the key/value being rendered. For your use case, you could do something like

this.valueRenderer(pretty, raw, ...path) {
  if (path.join('.') === 'root.path.el') {
    return <span className="highlighted">{pretty}</span>
  }
  
  <span className="highlighted">{pretty}</span>
}

[MykolaGolubyev]

Works like a charm! Thank you. Based on docs it wasn't clear if there is more than one parameter.