Instantsearch React UI component library

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.

Learn more about the Algolia products

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 with React InstantSearch

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 with all our API clients and frameworks

Key links

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>

  );

}

Get started for free

Explore developer docs

React + Algolia