react-instantsearch-core

import React, { useState, useEffect } from 'react'; import algoliasearch from 'algoliasearch'; import { InstantSearch, useInstantSearch } from 'react-instantsearch-core'; const searchClient = algoliasearch( process.env.ALGOLIA_APP_ID ?? 'YOUR_APP_ID', process.env.ALGOLIA_SEARCH_API_KEY ?? 'YOUR_SEARCH_API_KEY' ); const indexName = 'your_index_name'; function CustomSearchBox() { const { uiState, setUiState } = useInstantSearch(); const [query, setQuery] = useState(uiState.query || ''); useEffect(() => { // Synchronize local query state with InstantSearch's UI state if (uiState.query !== query) { setQuery(uiState.query || ''); } }, [uiState.query]); const handleChange = (event) => { const newQuery = event.target.value; setQuery(newQuery); setUiState(prevUiState => ({ ...prevUiState, query: newQuery })); }; return ( <input type="search" placeholder="Search..." value={query} onChange={handleChange} style={{ padding: '10px', width: '300px', marginBottom: '20px' }} /> ); } function CustomHits() { const { results } = useInstantSearch(); return ( <div> {results.hits.length > 0 ? ( <ul> {results.hits.map(hit => ( <li key={hit.objectID} style={{ marginBottom: '10px' }}> {/* Assuming your hits have a 'name' property */} <h3>{hit.name}</h3> <p>{hit.description}</p> </li> ))} </ul> ) : ( <p>No results found.</p> )} </div> ); } function App() { return ( <InstantSearch searchClient={searchClient} indexName={indexName} initialUiState={{ [indexName]: { query: '' } }} > <h1>My Custom Search</h1> <CustomSearchBox /> <CustomHits /> </InstantSearch> ); } export default App;