Lego-react-json-view

JSON viewer with Dark Theme, Search, Filters, paths Reopening and more =)

Install (npm / yarn):

npm i -S lego-react-json-view

yarn add lego-react-json-view

DEMO

DEMO link: lego-react-json-view

Quick-start - React code example:

// Import LegoView
import LegoView from "lego-react-json-view";
// ...

//...
// Use LegoReactJsonView with json data
return <LegoView json={json} />;
//...

Full example:

import React from "react";
import ReactDOM from "react-dom";

// Import LegoView
import LegoViewer from "lego-react-json-view";

const App = () => {
  const json = {
    hello: {
      test: "test json data",
      hide: {
        this: {
          path: {
            data: "inner data (hide.this.path)"
          }
        }
      }
    }
  };

  // Use LegoReactJsonView with json data
  return <LegoViewer json={json} />;
};

ReactDOM.render(<App />, document.getElementById("root"));

Custom settings:

Settings object (propsSettings) could be passed directly in react component:

...
  const propsSettings = {
    theme: "auto",
    fontSize: "0.81",
    searchLimit: "111",
    isExpanded: false
  };

  return <LegoViewer
    json={json}
    settings={propsSettings}
  />
...

Settings:

• fontSize - json font size;
• searchLimit - max number of showing results;
• theme - color theme mode ("light" | "dark" | "auto");
• isExpanded - is expanded by default all json objects?

Note:

• propsSettings have higher priority, then inner (witch could be changed via UI interface)!
• inner settings will be dropped to propsSettings after page reload!

Main features:

• [x] Save previously opened paths in json;
• [x] Collaps paths by collaps filters;
• [x] Search paths in json.

TODO:

Custom filter settings:

• [x] Add filter;
• [x] Delete filter;
• [x] Expanded block will be restored after page reload (saved in localStorage - LS) ;
• [x] Show/hide collapsed section will be restored after page reload (LS);
• [-] Enable/disable filter (one by one).

"Search" in json:

• [x] Value search;
• [x] Path search;
• [x] fuzzy search;
• [x] Full json search
• • heighlight all found results,
• • collaps all unnecessary blocks in json after search;
• [x] Find all paths in json tree;
• [x] On Enter - show all results;
• [x] Search button;
• [x] Path could be separated by items: [".", "/", "\"].

Additional settings:

• [x] Copy button clipboard;
• [x] Dynamic font size (buttons);
• [x] Auto change theme dark/light mode (based on macOS theme);
• [x] Manual theme change (dark/light/auto mode).

Friendly ui:

• [x] Settings toggle by button (on the right top corner ?);
• [x] Toggle dark/light theme;
• [-] Redesign button (it's not clear that it's a button =) );
• [x] Think about search counter (sometimes it's too big or too small);
• [-] Clipboard button scale with font size;
• [-] ? Show tooltip (Copied) after clicking on clipboard;
• [x] onEnter search with empty input - clean results;
• [x] Clear search text (button);
• [x] Add settings close button;
• [-] Input animation (?);
• [-] On Search loading animations.