React quick start

Integrate a search-as-you-type experience into your React app.

Integrate a search-as-you-type experience into your React app.

1. Create a React application

Create your React application using a Vite template:

npm create vite@latest my-app -- --template react

2. Install the library of search components

Navigate to your React app and install react-instantsearch, @meilisearch/instant-meilisearch, and instantsearch.css.

npm install react-instantsearch @meilisearch/instant-meilisearch instantsearch.css

• React InstantSearch: front-end tools to customize your search environment
• instant-meilisearch: Meilisearch client to connect with React InstantSearch
• instantsearch.css (optional): CSS library to add basic styles to the search components

3. Initialize the search client

Use the following URL and API key to connect to a Meilisearch instance containing data from Steam video games.

import React from 'react';
import { instantMeiliSearch } from '@meilisearch/instant-meilisearch';

const { searchClient } = instantMeiliSearch(
  'https://ms-adf78ae33284-106.lon.meilisearch.io',
  'a63da4928426f12639e19d62886f621130f3fa9ff3c7534c5d179f0f51c4f303'
);

4. Add the InstantSearch provider

<InstantSearch> is the root provider component for the InstantSearch library. It takes two props: the searchClient and the index name.

import React from 'react';
import { InstantSearch } from 'react-instantsearch';
import { instantMeiliSearch } from '@meilisearch/instant-meilisearch';

const { searchClient } = instantMeiliSearch(
  'https://ms-adf78ae33284-106.lon.meilisearch.io',
  'a63da4928426f12639e19d62886f621130f3fa9ff3c7534c5d179f0f51c4f303'
);

const App = () => (
  <InstantSearch
    indexName="steam-videogames"
    searchClient={searchClient}
  >
  </InstantSearch>
);

export default App

5. Add a search bar and list search results

Add the SearchBox and InfiniteHits components inside the InstantSearch wrapper component. The Hits component accepts a custom Hit component via the hitComponent prop, which allows customizing how each search result is rendered.

Import the CSS library to style the search components.

import React from 'react';
import { InstantSearch, SearchBox, InfiniteHits } from 'react-instantsearch';
import { instantMeiliSearch } from '@meilisearch/instant-meilisearch';
import 'instantsearch.css/themes/satellite.css';

const { searchClient } = instantMeiliSearch(
  'https://ms-adf78ae33284-106.lon.meilisearch.io',
  'a63da4928426f12639e19d62886f621130f3fa9ff3c7534c5d179f0f51c4f303'
);

const App = () => (
  <InstantSearch
    indexName="steam-videogames"
    searchClient={searchClient}
  >
    <SearchBox />
    <InfiniteHits hitComponent={Hit} />
  </InstantSearch>
);

const Hit = ({ hit }) => (
  <article key={hit.id}>
    <img src={hit.image} alt={hit.name} />
    <h1>{hit.name}</h1>
    <p>${hit.description}</p>
  </article>
);
export default App

Use the following CSS classes to add custom styles to your components: .ais-InstantSearch, .ais-SearchBox, .ais-InfiniteHits-list, .ais-InfiniteHits-item

6. Start the app and search as you type

Start the app by running:

npm run dev

Now open your browser and navigate to your React app URL (e.g. localhost:3000), and start searching.

Encountering issues? Check out the code in action in our live demo!

Next steps

Want to search through your own data? Create a project in the Meilisearch Dashboard. Check out our getting started guide for step-by-step instructions.