@reach/combobox

What is @reach/combobox?

@reach/combobox is a React component library that provides accessible combobox (autocomplete) components. It helps developers create input fields that offer suggestions as the user types, improving the user experience and accessibility.

What are @reach/combobox's main functionalities?

Basic Combobox

This code demonstrates a basic combobox with a few options. The user can type in the input field, and the combobox will display matching options.

```jsx
import { Combobox, ComboboxInput, ComboboxPopover, ComboboxList, ComboboxOption } from "@reach/combobox";
import "@reach/combobox/styles.css";

function BasicCombobox() {
  return (
    <Combobox>
      <ComboboxInput aria-labelledby="demo" />
      <ComboboxPopover>
        <ComboboxList>
          <ComboboxOption value="Apple" />
          <ComboboxOption value="Banana" />
          <ComboboxOption value="Orange" />
        </ComboboxList>
      </ComboboxPopover>
    </Combobox>
  );
}
```

Combobox with Custom Filtering

This code demonstrates a combobox with custom filtering logic. The list of options is filtered based on the user's input.

```jsx
import { useState } from "react";
import { Combobox, ComboboxInput, ComboboxPopover, ComboboxList, ComboboxOption } from "@reach/combobox";
import "@reach/combobox/styles.css";

const items = ["Apple", "Banana", "Orange", "Grape", "Pineapple"];

function CustomFilterCombobox() {
  const [term, setTerm] = useState("");
  const results = items.filter(item => item.toLowerCase().includes(term.toLowerCase()));

  return (
    <Combobox onSelect={item => setTerm(item)}>
      <ComboboxInput aria-labelledby="demo" onChange={e => setTerm(e.target.value)} />
      <ComboboxPopover>
        <ComboboxList>
          {results.map((item, index) => (
            <ComboboxOption key={index} value={item} />
          ))}
        </ComboboxList>
      </ComboboxPopover>
    </Combobox>
  );
}
```

Combobox with Async Data

This code demonstrates a combobox that fetches data asynchronously based on the user's input. The results are fetched from an API and displayed as options.

```jsx
import { useState, useEffect } from "react";
import { Combobox, ComboboxInput, ComboboxPopover, ComboboxList, ComboboxOption } from "@reach/combobox";
import "@reach/combobox/styles.css";

function AsyncCombobox() {
  const [term, setTerm] = useState("");
  const [results, setResults] = useState([]);

  useEffect(() => {
    if (term) {
      fetch(`https://api.example.com/search?q=${term}`)
        .then(response => response.json())
        .then(data => setResults(data.items));
    } else {
      setResults([]);
    }
  }, [term]);

  return (
    <Combobox onSelect={item => setTerm(item)}>
      <ComboboxInput aria-labelledby="demo" onChange={e => setTerm(e.target.value)} />
      <ComboboxPopover>
        <ComboboxList>
          {results.map((item, index) => (
            <ComboboxOption key={index} value={item} />
          ))}
        </ComboboxList>
      </ComboboxPopover>
    </Combobox>
  );
}
```

Other packages similar to @reach/combobox

react-autosuggest

react-autosuggest is a React component for building input fields with suggestions. It offers more customization options and flexibility compared to @reach/combobox but may require more setup to ensure accessibility.

downshift

downshift is a library that provides primitives to build accessible autocomplete, combobox, dropdown, and select components. It offers a higher level of customization and control compared to @reach/combobox, but it also requires more effort to implement.

react-select

react-select is a flexible and customizable select input control for React with support for multi-select, async options, and more. It provides a richer set of features compared to @reach/combobox but is also more complex to use.