```const search = instantsearch({
// ...
searc...
# community-helpv
Vasudev Parmar
08/10/2022, 9:02 AM Copy code
const search = instantsearch({
// ...
searchClient: algoliasearch(
'YourApplicationID',
'YourSearchOnlyAPIKey'
),
});Vasudev Parmar
08/10/2022, 9:38 AM@Kishore Nallan please help me with this
k
Kishore Nallan
08/10/2022, 10:02 AMThat seems be a snippet from algolia. For Typesense you need API key and host. Check our example apps.
v
Vasudev Parmar
08/10/2022, 10:05 AMyeah but Application id is also mentioned on typesense documentation
k
Kishore Nallan
08/10/2022, 10:07 AMThat's just logs. For actual code config, check this example: https://github.com/typesense/showcase-ecommerce-store/blob/master/src/app.js
Kishore Nallan
08/10/2022, 10:07 AMYou've to instantiate TypesenseInstantSearchAdapter
v
Vasudev Parmar
08/10/2022, 10:15 AMwhat i am trying is creating an react app and trying to access hits with react-instantsearch
Vasudev Parmar
08/10/2022, 10:16 AMimport React from 'react';
import algoliasearch from 'algoliasearch/lite';
import {
InstantSearch,
Configure,
Hits,
SearchBox,
DynamicWidgets,
Panel,
Highlight,
RefinementList,
Pagination,
} from 'react-instantsearch-dom';
import PropTypes from 'prop-types';
import './App.css';
const searchClient = algoliasearch(
'latency',
'6be0576ff61c053d5f9a3225e2a90f76'
);
function App() {
return (
<div >
<header className="header">
<h1>Jobs Trail</h1>
</header>
<div className="ais-InstantSearch">
{/* instant_search */}
<InstantSearch searchClient={searchClient} indexName="instant_search">
<Configure hitsPerPage={8} />
<div className="search-panel">
<div className="search-panel__filters">
<DynamicWidgets fallbackWidget={RefinementList}></DynamicWidgets>
</div>
<div >
<SearchBox
className="searchbox"
translations={{
placeholder: '',
}}
/>
<Hits hitComponent={Hit} />
<div className="pagination">
<Pagination />
</div>
</div>
</div>
</InstantSearch>
</div>
</div>
);
}
function Hit(props) {
console.log(props)
return (
<div>
<img src={props.hit.image} align="left" alt={props.hit.name} />
<div className="hit-name">
<Highlight attribute="name" hit={props.hit} />
</div>
<div className="hit-description">
<Highlight attribute="description" hit={props.hit} />
</div>
<div className="hit-price">${props.hit.price}</div>
</div>
);
}
Hit.propTypes = {
hit: PropTypes.object.isRequired,
};
export default App;
k
Kishore Nallan
08/10/2022, 10:17 AMYou've to use the adaptor, can't use instant search directly with Typesense without that.
v
Vasudev Parmar
08/10/2022, 10:18 AMokay
Vasudev Parmar
08/10/2022, 10:24 AMi have built a UI as you are describing here, i need react app to show everything
Vasudev Parmar
08/10/2022, 10:24 AMcant i do that without the TypesenseInstantSearchAdapter
j
Jason Bosco
08/10/2022, 3:09 PMcreate-instantsearch-app will generate that scaffold for you with application ID (for which you can enter anything), but if you follow further in the guide you’ll see that you will be replacing some of that generated code with the Typesense instantsearch adapter
Jason Bosco
08/10/2022, 3:10 PMJust below the screenshot of the code snippet you posted, the guide says:
Application ID: can be any string - we'll be replacing this later in the guide
Jason Bosco
08/10/2022, 3:11 PMThen it shows you what snippet to add to app.js for the adapter and what existing snippet to replace