Skip to content
This repository was archived by the owner on May 14, 2020. It is now read-only.

Highlight values by a given list of paths #96

Open
MykolaGolubyev opened this issue Sep 20, 2017 · 2 comments
Open

Highlight values by a given list of paths #96

MykolaGolubyev opened this issue Sep 20, 2017 · 2 comments

Comments

@MykolaGolubyev
Copy link

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
Copy link

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
Copy link
Author

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

# for free to subscribe to this conversation on GitHub. Already have an account? #.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants