Customs search box - exposed props missing in TS?


I’m trying to make a custom search box, but can’t seem to pass the custom Algolia props.

The docs state that I should be able to pass exposed props to my custom component, but the only exposed prop (at least in the TS typings) is defaultRefinement. Does that mean that I cannot use any of the other props with a custom component?

Specifically, I’d like to indicate “loading”


I suppose that you are using the TS typings from DefinitelyTyped, but from what I see the props are correctly exposed

I think you may have an issue in your imports, can you show us your code?

I think you’re referincing the props for Algolia’s prebuilt search box. The props for the connectSearchBox are these:

import { createStyles, Grid, TextField, Theme, Typography, WithStyles, withStyles } from '@material-ui/core';
import React, { ChangeEvent, FC } from 'react';
import { SearchBoxProvided } from 'react-instantsearch-core';
import { connectSearchBox } from 'react-instantsearch-dom';

const SearchBox: FC<Props> = ({ classes, refine, isSearchStalled, currentRefinement }) => {
  return (
    <Grid container={true} spacing={24}>
      <Grid item={true} xs={12}>
        <Grid item={true}>
            label="Search field"
            onChange={(event: ChangeEvent<HTMLInputElement>) => {
              const newQuery =;
          {isSearchStalled && <Typography variant="caption">Search stalled, please try again</Typography>}

const styled = withStyles(styles)(SearchBox);
export const ARSearchBox = connectSearchBox(styled);

Oh ok, you are using the connector. In that case the only exposed props are refine, isSearchStalled and currentRefinement. You can find the full documentation here:

You can use isSearchStalled to display your loading indicator (you can look at the default SearchBox implementation for inspiration) and if I’m not mistaken in your case the Props type should be:

type Props = SearchBoxProvided & WithStyles;