Loading

useSearch hook

In addition, to using withSearch you can now use useSearch hook in your custom react functional component.

In order to use this hook, you should wrap your functional component in SearchProvider. We will see an example on how to use useSearch hook to render "loading" indicator when the application is fetching data.

const Component = () => {
  const { isLoading } = useSearch();
  return (
    <div className="App">
      {isLoading && <div>I'm loading now</div>}
      {!isLoading && (
        <Layout
          header={<SearchBox />}
          bodyContent={<Results titleField="title" urlField="nps_link" />}
        />
      )}
    </div>
  );
};
export const App = () => {
  return (
    <SearchProvider config={config}>
      <Component />
    </SearchProvider>
  );
};