• Been playing with react instant search hooks and I’m very impressed. They’ve thought of everything. This small bit of code does anything you want a search ui to do

import {
  Configure,
  Highlight,
  Hits,
  InstantSearch,
  Pagination,
  RefinementList,
  SearchBox,
} from 'react-instantsearch-hooks-web';

import { history } from 'instantsearch.js/es/lib/routers';

const routing = {
  router: history(),
};

const searchClient = algoliasearch(
  'A5NH1O01I7',
  '26c89c07aa764a90782aff6ffba5ac66'
);

function Hit({ hit }) {
  return (
    <article>
      <h1>
        <Highlight attribute="post_title" hit={hit} />
      </h1>
    </article>);
}

const Page = () => {

return (
  <div>
    <InstantSearch
      searchClient={searchClient}
      indexName="my_first_index"
      routing={routing}>    
    
    <SearchBox
      classNames={{
      root: 'h-3',
      }}
    />
    
      <RefinementList attribute="categories" />
      
      <Hits hitComponent={Hit} />
      
      <Pagination />
      
      </InstantSearch>
  
      <Login />
  </div>
);

};

this gives a search box which populate the ui with results . we can filter by facets and there is text highlighting. to overidden classes we can use tailwind with classnames prop they provide. each class can be overridden.