Skip to content
This repository has been 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.

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

No branches or pull requests

2 participants