Customs search box - exposed props missing in TS?

Hey!

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”

Hello,

I suppose that you are using the TS typings from DefinitelyTyped, but from what I see the props are correctly exposed https://github.com/DefinitelyTyped/DefinitelyTyped/blob/c4317350aafe716a44db30061310ce504abdb4f9/types/react-instantsearch-dom/index.d.ts#L121-L135.

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: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/c4317350aafe716a44db30061310ce504abdb4f9/types/react-instantsearch-core/index.d.ts#L480-L491

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}>
          <TextField
            label="Search field"
            type="search"
            value={currentRefinement}
            className={classes.textField}
            onChange={(event: ChangeEvent<HTMLInputElement>) => {
              const newQuery = event.target.value;
              refine(newQuery);
            }}
          />
          {isSearchStalled && <Typography variant="caption">Search stalled, please try again</Typography>}
        </Grid>
      </Grid>
    </Grid>
  );
};

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: https://www.algolia.com/doc/api-reference/widgets/search-box/react/#provided-props

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;