Elasticsearch Search UI Components

import Searchkit from "searchkit"
import Client from '@searchkit/instantsearch-client'
import { InstantSearch, SearchBox, Hits, RefinementList, Pagination, RangeInput } from 'react-instantsearch-hooks-web';
 
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} />
          <RangeInput attribute="imdbrating" />
        </div>
        <div className="right-panel">
          <Hits />
          <Pagination />
        </div>
      </InstantSearch>
    );
}
 

5 minute Video Tutorial