json-highlighter

A React component to highlight JSON by its keys/paths

Based on react-highlight-words.

Usage

To use it, just provide it with a JSON object and an array of paths to highlight.

Try this example in Stackblitz.

import React from 'react';
import { JsonHighlighter } from 'json-highlighter';

const App = (props) => {
  const json = {
    key1: {
      innerArray: ['string to mark'],
    },
    key2: {
      objectToMark: {
        a: 1,
        b: 2,
        c: ['xyz'],
      },
    },
  };

  const paths = ['key1.innerArray[0]', 'key2.objectToMark'];

  return (
    <pre>
      <JsonHighlighter
        json={json}
        space={4} 
        paths={paths} 
        {...props} // props for react-highlight-words
      />
    </pre>
}

And the JsonHighlighter will mark all values based on the provided paths.

Props

Property	Type	Description
json	Object	A JSON object or string
space	Number	the space parameter for JSON.stringify for the final textual result. see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
paths	Array	array of strings - each string represents a path inside the json. e.g: 'foo[0].bar'

react-highlight-words Props

Relevant props to pass to the inner react-highlight-words component. to see all props go to: https://github.com/bvaughn/react-highlight-words

Property	Type	Description
activeClassName	String	The class name to be applied to an active match. Use along with activeIndex
activeIndex	Number	Specify the match index that should be actively highlighted. Use along with activeClassName
activeStyle	Object	The inline style to be applied to an active match. Use along with activeIndex
highlightClassName	String or Object	CSS class name applied to highlighted text or object mapping search term matches to class names.
highlightStyle	Object	Inline styles applied to highlighted text
highlightTag	Node	Type of tag to wrap around highlighted matches; defaults to mark but can also be a React element (class or functional)
unhighlightClassName	String	CSS class name applied to unhighlighted text
unhighlightStyle	Object	Inline styles applied to unhighlighted text
*	any	Any other props (such as title or data-*) are applied to the outer/wrapper <span>

Installation

yarn add json-highlighter

npm i --save json-highlighter

License

MIT License - fork, modify and use however you want.