@parataxic/react-use-flexsearch

Typed version of https://github.com/angeloashmore/react-use-flexsearch

• TypeScript
• Uses a typed react useReducer to support lazily loading
• Supports lazy loading results from gatsby-plugin-local-search
• Accepts and returns a typed object
• Downloads lazy loading results
• Returns onFocus to trigger downloading of search data

yarn add @parataxic/react-use-flexsearch npm install @parataxic/react-use-flexsearch

import { useFlexSearch } from "@parataxic/react-use-flexsearch";

const MyView:React.FC = () => {
  const { localSearchPages } =
    useStaticQuery<GatsbyTypes.ListerQuery>(graphql`
      query Lister {
        localSearchPages {
          publicIndexURL
          publicStoreURL
        }
      }
    `);

  const {results} = useFlexSearch(searchTerm, {...localSearchPages});

  const resultsIds = results.map(({ id }) => id);

  const filterPosts = (post) => {
    if (resultsIds.length === 0) return true;
    return resultsIds.includes(post.id);
  };


  return (
    <>
      <button onClick={onFocus}>Fetch search data</button>
      {items.filter(filterPosts).map((item, idx: number) => <div key={key}>{item.title}</div>)}
    </>
  )
}