Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

react-autowhatever

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-autowhatever

Accessible rendering layer for Autosuggest and Autocomplete components

6.0.0
Source
npm

Version published: 8 years ago

Weekly downloads: 95K; decreased by-18.48%

Maintainers: 1

Weekly downloads

Created: 9 years ago

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