Estoy usando React InstantSearch en Algolia y estoy tratando de que oculte su componente de "hits" de forma predeterminada y solo aparezca cuando sea el momento de usarlo y haga clic en el cuadro de búsqueda.
Comencé mi investigación aquí: https://www.algolia.com/doc/guides/building-search-ui/going-further/conditional-display/react/?client=jsx#handling-the-empty-query
Pude usar la consulta, pero no pude averiguar cómo aplicarla al componente "hits".
Hasta ahora tengo esto en mi código:
import React from "react"; import Head from 'next/head' import Header from '../components/Header' import Hero from '../components/Hero' import Titles from '../components/Titles' import CustomHits from "../components/CustomHits"; import { useRouter } from 'next/router' import Screenfull from "../components/Screenfull" import { useRef } from "react"; import algoliasearch from "algoliasearch/lite"; import { InstantSearch, SearchBox, Hits, Configure, Pagination, RefinementList, connectStateResults, connectHits, Results } from "react-instantsearch-dom"; const searchClient = algoliasearch( ("XXXXXXXXXXXX"), ("XXXXXXXXXXXXXXX"), ); const Hit = ({ hit }) => <p>{hit.title}</p>; export default function Home({ninjas}) { const Results = connectStateResults(({ searchState }) => searchState && searchState.query ? ( <div>Searching for query {searchState.query}</div> ) : ( <div>No query</div> ) ); return ( <div> <Head> <title>Minerva</title> <link rel="icon" href="/favicon.ico" /> </Head> <Header /> <Hero /> <> <InstantSearch searchClient={searchClient} indexName="prod_Directory"> {/* Adding Search Box */} <SearchBox/> {/* Adding Data */} <Configure hitsPerPage={2} /> <RefinementList attribute="title" /> <Hits className ="bg-gray-500 z-50" hitComponent={Hit}/> <Results /> </InstantSearch> </> <Titles title='SERIES'/> <CustomHits /> </div> ) }Puede crear un estado booleano para "mostrar aciertos" y establecerlo en true cuando el cuadro de búsqueda está enfocado y en false cuando está "borroso".
const [showHits, setShowHits] = useState(false); ... <SearchBox onFocus={()=>setShowHits(true)} onBlur={()=>setShowHits(false)}/> ... {showHits ? <Hits hitComponent={Hit} /> : null}Aquí hay una caja de códigos que demuestra esto.