What is Algolia

Algolia empowers modern developers to build world class search and discovery experiences without any DevOps.
Libraries with every major language and framework make it easy to enrich your users' experiences. 

Add autocomplete to your react applications

React InstantSearch UI library is pre-built, customizable and flexible UI widgets to create your own search experiences -  explore the showcase. It has server side rendering and routing capabilities and is Open source, production-ready and maintained by Algolia.

Get started

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>
  );
}

Enable anyone to build great Search & Discovery