import { useNostoSearch } from '@nosto/nosto-react'
function SearchPage({ searchQuery }: { searchQuery: string }) {
useNostoSearch({
query: searchQuery,
placements: ['searchpage-nosto-1', 'searchpage-no-results']
})
return (
<div>
<h1>Search Results for "{searchQuery}"</h1>
{/\* Search results here */}
<div id="searchpage-nosto-1" />
<div id="searchpage-no-results" />
</div>
)
}
import { useNostoSearch } from '@nosto/nosto-react'
import { useState } from 'react'
function SearchPageWithFilters() {
const [query, setQuery] = useState('')
useNostoSearch({
query: query,
placements: ['search-recommendations', 'search-trending']
})
return (
<div>
<input
type="text"
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Search products..."
/>
<div id="search-recommendations" />
<div id="search-trending" />
</div>
)
}
You can personalise your search pages by using the useNostoSearch hook.