Elasticsearch Search UI Components

import Searchkit from "searchkit"
import Client from '@searchkit/instantsearch-client'
import { InstantSearch, SearchBox, Hits, RefinementList, Pagination, NumericMenu } from 'react-instantsearch-dom';
 
const sk = new Searchkit({
  connection: {
    host: 'http://localhost:9200',
    auth: {
      username: "elastic",
      password: "changeme"
    }
  },
  search_settings: {
    search_attributes: [{ field: 'title', weight: 3 }, 'actors', 'plot'],
    result_attributes: ['title', 'actors', 'poster', 'plot'],
    highlight_attributes: ['title'],
    facet_attributes: [
      { attribute: 'actors', field: 'actors.keyword', type: 'string' },
      { attribute: 'imdbrating', type: 'numeric', field: 'imdbrating' }
    ]
  }
})
 
const searchClient = Client(sk);
 
export default function Web() {
    return (
      <InstantSearch
        indexName="imdb_movies"
        searchClient={searchClient}
      >
        <SearchBox />
        <div className="left-panel">
          <RefinementList attribute="actors" searchable={true} limit={10} />
          <NumericMenu
            attribute="imdbrating"
            items={[
              { label: '5 - 7', start: 5, end: 7 },
              { label: '7 - 9', start: 7, end: 9 },
              { label: '>= 9', start: 9 },
            ]}
          />
        </div>
        <div className="right-panel">
          <Hits />
          <Pagination />
        </div>
      </InstantSearch>
    );
}
 

5 minute Video Tutorial