Add the ability to filter multiple values for refining from useRefinementList

[kanehara]

useRefinementList returns a refine method but as far as I could find, it only allows for refining a single value. It would be nice if this supported the array syntax of refine from useConfigure.

[francoischalifour]

Thanks for the suggestion. In the long run, we plan on improving this refine API to accept multiple values.

We're currently working on a new useInstantSearch() API that will expose a setIndexUiState() function that allows batching updates:

function Search() {
  const { setIndexUiState } = useInstantSearch(); // now public!

  return (
    <div>
      <SearchBox />
      <RefinementList attribute="brand" />
      <button
        onClick={() => {
          setIndexUiState((prevUiState) => ({
            ...prevUiState,
            refinementList: {
              ...prevUiState.refinementList,
              brand: ['Apple', 'Samsung'],
            },
          }));
        }}
      >
        Update state
      </button>
    </div>
  );
}

function App(props) {
  return (
    <InstantSearch {...props}>
      <Search />
    </InstantSearch>
  );
}

You can expect this new API to land in the next few days.

Could you share your use case so we better understand why you need to refine multiple values?

[kanehara]

We are building a select all UI which selects all facets but currently we have to iterate refinement list and toggle them resulting in multiple network requests and a laggy UI experience

[francoischalifour]

Since v6.28.0 you can use the useInstantSearch() Hook.

[AkashDutt0211]

Any updates on this?

[Haroenv]

what update would be needed @AkashDutt0211, the code sample works :)

[AkashDutt0211]

I am using this code for a custom refinement list @Haroenv. This doesn't refine the search results.
Am I doing something wrong in the code?

import { useInstantSearch, useMenu } from "react-instantsearch-hooks-web";
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import { useEffect, useState } from "react";

const CustomRefinementList = (props) => {
    const { items } = useMenu(props);
    const { setIndexUiState } = useInstantSearch();

    const [checkboxState, setCheckBoxState] = useState({});

    useEffect(() => {
        setIndexUiState((prevUiState) => ({
            ...prevUiState,
            refinementList: {
                ...prevUiState.refinementList,
                brand: Object.keys(checkboxState).filter(key => checkboxState[key] === true),
            },
        }));
    }, [checkboxState])

    const handleChange = (event) => {
        setCheckBoxState({ ...checkboxState, [event.target.name]: event.target.checked });
    }

    return (
        <>
            {
                items.map(item => (
                    <FormControlLabel
                        control={
                            <Checkbox
                                checked={checkboxState[item.label]}
                                onChange={handleChange}
                                name={item.label}
                                color="primary"
                            />
                        }
                        label={item.label}
                        key={item.value}
                    />
                ))
            }
        </>
    )
}

export default CustomRefinementList;