Json-highlighter NPM

A React component to highlight JSON by its keys/paths alt text

Usage

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

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: 'foo0.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>`