react-autowhatever

What is react-autowhatever?

react-autowhatever is a versatile React component for building customizable autocomplete and autosuggest inputs. It provides a flexible way to create input fields that offer suggestions as the user types, making it easier to implement search bars, dropdowns, and other input-related functionalities.

What are react-autowhatever's main functionalities?

Basic Autocomplete

This code demonstrates a basic autocomplete input using react-autowhatever. It shows how to set up the component with a list of items and handle user input and highlighting.

```jsx
import React, { useState } from 'react';
import Autowhatever from 'react-autowhatever';

const items = [
  { text: 'Apple' },
  { text: 'Banana' },
  { text: 'Cherry' }
];

const App = () => {
  const [value, setValue] = useState('');
  const [highlightedIndex, setHighlightedIndex] = useState(null);

  const onChange = (event) => {
    setValue(event.target.value);
  };

  const renderItem = (item, { isHighlighted }) => (
    <div style={{ background: isHighlighted ? 'lightgray' : 'white' }}>
      {item.text}
    </div>
  );

  return (
    <Autowhatever
      items={items}
      inputProps={{
        value,
        onChange
      }}
      renderItem={renderItem}
      highlightedIndex={highlightedIndex}
      onHighlightedIndexChange={({ highlightedIndex }) => setHighlightedIndex(highlightedIndex)}
    />
  );
};

export default App;
```

Custom Render Item

This example shows how to customize the rendering of each item in the autocomplete list. Each item is rendered with a unique key and styled differently when highlighted.

```jsx
import React, { useState } from 'react';
import Autowhatever from 'react-autowhatever';

const items = [
  { text: 'Apple', id: 1 },
  { text: 'Banana', id: 2 },
  { text: 'Cherry', id: 3 }
];

const App = () => {
  const [value, setValue] = useState('');
  const [highlightedIndex, setHighlightedIndex] = useState(null);

  const onChange = (event) => {
    setValue(event.target.value);
  };

  const renderItem = (item, { isHighlighted }) => (
    <div key={item.id} style={{ background: isHighlighted ? 'lightgray' : 'white' }}>
      <strong>{item.text}</strong>
    </div>
  );

  return (
    <Autowhatever
      items={items}
      inputProps={{
        value,
        onChange
      }}
      renderItem={renderItem}
      highlightedIndex={highlightedIndex}
      onHighlightedIndexChange={({ highlightedIndex }) => setHighlightedIndex(highlightedIndex)}
    />
  );
};

export default App;
```

Sectioned Autocomplete

This code demonstrates how to create a sectioned autocomplete input using react-autowhatever. It shows how to organize items into sections and render section titles.

```jsx
import React, { useState } from 'react';
import Autowhatever from 'react-autowhatever';

const items = [
  {
    title: 'Fruits',
    items: [
      { text: 'Apple' },
      { text: 'Banana' }
    ]
  },
  {
    title: 'Vegetables',
    items: [
      { text: 'Carrot' },
      { text: 'Lettuce' }
    ]
  }
];

const App = () => {
  const [value, setValue] = useState('');
  const [highlightedIndex, setHighlightedIndex] = useState(null);

  const onChange = (event) => {
    setValue(event.target.value);
  };

  const renderSectionTitle = (section) => (
    <strong>{section.title}</strong>
  );

  const getSectionItems = (section) => section.items;

  const renderItem = (item, { isHighlighted }) => (
    <div style={{ background: isHighlighted ? 'lightgray' : 'white' }}>
      {item.text}
    </div>
  );

  return (
    <Autowhatever
      items={items}
      inputProps={{
        value,
        onChange
      }}
      renderItem={renderItem}
      renderSectionTitle={renderSectionTitle}
      getSectionItems={getSectionItems}
      highlightedIndex={highlightedIndex}
      onHighlightedIndexChange={({ highlightedIndex }) => setHighlightedIndex(highlightedIndex)}
    />
  );
};

export default App;
```

Other packages similar to react-autowhatever

react-autosuggest

react-autosuggest is a popular package for building autocomplete and autosuggest components in React. It offers a higher-level abstraction compared to react-autowhatever, making it easier to implement common use cases but with less flexibility for custom implementations.

downshift

downshift is a powerful library for building autocomplete, dropdown, and select components in React. It provides a set of hooks and utilities for managing state and behavior, offering more control and flexibility compared to react-autowhatever.

react-select

react-select is a flexible and customizable library for building select inputs in React. It supports async options, custom styling, and various interaction modes, making it a robust alternative to react-autowhatever for more complex select and autocomplete use cases.

README

Demo

TODO:

• Write docs
• Write tests

Later:

• Add support for items container with a scrollbar