Add the FastTrack UI widgets

Next, add the FastTrack widgets. In this example, the MarkLogicContext, ResultsSnippet, and SearchBox widgets are added. Replace the code in the App.jsx file with this:

import React from 'react'
import './App.css'
import { useContext } from "react";
import { MarkLogicContext, SearchBox, ResultsSnippet } from "ml-fasttrack"

function App() {
  const context = useContext(MarkLogicContext);
  return (
    <div>
      <SearchBox/>
      <ResultsSnippet/>
    </div>
  )
}

export default App

Widget definitions

• MarkLogicContext - communicates with MarkLogic.

• ResultsSnippet - displays search results.

• SearchBox - allows a user to enter and submit search text.