Go to homev1.11 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-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
    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 a few 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.