React InstantSearch for mobile and web

React InstantSearch for mobile and web

A front-end search library with Search UI components

Sign up

Features

  • 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)


Version

  • 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, ...

Related Integrations

Works with Autocomplete and all our API clients and frameworks

Key links


Get started

CSS

1body { font-family: sans-serif; padding: 1em; }
2.ais-SearchBox { margin: 1em 0; }
3.ais-Pagination { margin-top: 1em }
4.left-panel { float: left; width: 250px; }
5.right-panel { margin-left: 260px; }

Import Components

1// Import components
2import {
3  InstantSearch,
4  Hits,
5  SearchBox,
6} from 'react-instantsearch-dom';

SEARCH CODE

1// Create the App component
2class App extends Component {
3  render() {
4    return (
5      <div className="ais-InstantSearch">
6        <h1>React InstantSearch e-commerce demo</h1>
7        <InstantSearch indexName="demo_ecommerce" searchClient={searchClient}>
8          <div className="right-panel">
9            <SearchBox />
10            <Hits hitComponent={Hit} />
11          </div>
12        </InstantSearch>
13      </div>
14    );
15  }
16}
17
18
19function Hit(props) {
20  return (
21    <div>
22      <img src={props.hit.image} align="left" alt={props.hit.name} />
23      <div className="hit-name">
24        <Highlight attribute="name" hit={props.hit} />
25      </div>
26      <div className="hit-description">
27        <Highlight attribute="description" hit={props.hit} />
28      </div>
29      <div className="hit-price">${props.hit.price}</div>
30    </div>
31  );
32}

Built with React on Algolia