Go to homev1.9 Docs

    React quick start

    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

    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-video-games"
    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/algolia.css';

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

const App = () => (
  <InstantSearch
    indexName="steam-video-games"
    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
    TIP

    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.

    React app search UI with a search bar at the top and search results for six video games

    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.