Develop with FastTrack

The JsonView widget looks like this:

In this example, the JsonView widget uses MarkLogicContext to display a MarkLogic search response. The search response JSON object is defined in the data prop:

import { useContext } from "react";
import './App.css';
import { MarkLogicContext, SearchBox, JsonView } from "ml-fasttrack";
  
function App() {
  
  const context = useContext(MarkLogicContext);
  
  const handleSearch = (params) => {
    context.setQtext(params?.q);
  }
  
  return (
    <div className="App">
      <div>
        <SearchBox onSearch={handleSearch}/>
      </div>
      <div>
        <JsonView
            data={context.searchResponse}
            displayDataTypes
            displayObjectSize
            enableClipboard
            groupArraysAfterLength={100}
            indentWidth={4}
            maxHeight="580px"
            quotesOnKeys
            rootName="envelope"
          />
      </div>
    </div>
  );
}
  
export default App;