Provides pre-built UI components following best practice principles for React that remain independent from external frameworks
Integrate into your existing UI or app, or use InstantSearch templates
Comes with a default CSS theme, completely customizable
Manages all business logic for search requests, responses, and states
Progressive customization of components (use, extend, or customize)
Compatible with all current versions of the underlying React library
Code is entirely open source and available on GitHub
Bootstrap your application, with create-instantsearch-app, NPM, ...
CSS (GET A FREE ACCOUNT HERE)
body { font-family: sans-serif; padding: 1em; }
.ais-SearchBox { margin: 1em 0; }
.ais-Pagination { margin-top: 1em }
.left-panel { float: left; width: 250px; }
.right-panel { margin-left: 260px; }
IMPORT COMPONENTS
import {
InstantSearch,
Highlight,
Hits,
SearchBox,
} from 'react-instantsearch-hooks-web';
SEARCH
// Create the App component
class App extends Component {
render() {
return (
<div className="ais-InstantSearch">
<h1>React InstantSearch e-commerce demo</h1>
<InstantSearch indexName="demo_ecommerce" searchClient={searchClient}>
<div className="right-panel">
<SearchBox />
<Hits hitComponent={Hit} />
</div>
</InstantSearch>
</div>
);
}
}
function Hit(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>
);
}