How to implement useToggleRefinement?

Open Q&A
,
1

Trying to migrate a simple Toggle Refinement to the react-instantsearch-hooks package.

Previous integration was simple:

              <ToggleFree
                attribute="price"
                label="Free"
                value="0"
                defaultRefinement={false}
              />

const ToggleFree = connectToggleRefinement(
  ({currentRefinement, refine}) => {
    const toggle = () => refine(!currentRefinement)
  }
)

This was able to quickly set a filter on hits where price === ‘0’.

Does anyone know how we could implement this same functionality with the react-instantsearch-hooks package?

We tried a custom component like so:

const ToggleFree = (props: UseToggleRefinementProps) => {
  const {value, refine} = useToggleRefinement(props)
...
}


  <ToggleFree attribute="price" on={"0"} />

but the filter is not being applied and InfiniteHits is returning all of the results.