Using Adobe's React Aria with Instant Search

[mmorris8]

I was wondering if anyone else was choosing to go down this path to perhaps compare notes with them.

For those who don't know what React Aria is - it is a standardized UI/UX components library written with WAG Aria compliance first in mind. It's very flexible and powerful and I've been using it in bits and pieces to try to improve the accessibility of the site I work on.

It is also the foundation for React Spectrum, which is Adobe's in house UI library. Spectrum is more full featured, but not as easy to style or modify which is why I've went the Aria route.

More information on those platforms is here: https://react-spectrum.adobe.com/react-aria/

[mmorris8]

Here's a MenuFacet Component built this way.

import React, { useState } from 'react';
import { ComboBox, Label, Input, Button, Popover, ListBox, ListBoxItem } from 'react-aria-components';
import { useMenu } from 'react-instantsearch';

export default function MenuFacet({label, ...props}) {
  const {items, refine} = useMenu(props)
  const [selection, setSelection] = useState('')

  const onSelectionChange = value => setSelection(previousValue => {
    if(previousValue !== value) refine(value)
    return value
  })

  return (
    <ComboBox 
      onSelectionChange={onSelectionChange}
      {...props}
    >
      <Label>{label}</Label>
      <div>
        <Input />
        <Button>▼</Button>
      </div>
      <Popover>
        <ListBox items={items} selectionMode="single">
          {item => <ListBoxItem id={item.label}>{item.label}</ListBoxItem>}
        </ListBox>
      </Popover>
    </ComboBox>
  )
}

[dhayab]

Hi, this example shows how to use React Spectrum's range slider with the useRange() Hook to refine on numeric values: https://www.algolia.com/doc/api-reference/widgets/range-slider/react/#range-slider-with-react-spectrum.

[mmorris8]

Cool. Hmm, a range slider on distance searches would be useful. Thanks.