open-index/open-npm huggingface dataset:
npm package: @koliseoapi/react-autocomplete
Description: An autocompleter for React with asynchronous behavior
Latest version: 2.0.0

# react-autocomplete

An autocompleter that displays options and responds to keyboard input (up, down, enter, esc). Inspired in [React Autocomplete](https://github.com/reactjs/react-autocomplete), but designed for a simplified workflow where requests are expected to be Promises.

Check the [demo here](http://koliseoapi.github.io/react-async-autocomplete).

## Use

```js
import Autocomplete from "@koliseoapi/react-autocomplete";

// render one item on the list
const MyItemView = function({ item }) {
  return (
    <div className="user-data">
      <div>{item.id}</div>
      <div>{item.name}</div>
    </div>
  );
};

class MyApp extends React.Component {
  constructor() {
    super();
    this.state = {
      selected: undefined
    };
    this.onChange = this.onChange.bind(this);
    this.onSelect = this.onSelect.bind(this);
  }

  // invoked when the user types something. A delay of 200ms is
  // already provided to avoid DDoS'ing your own servers
  onChange(query) {
    // you would normally do here your server access
    fetch("/users/search?q=" + query).then(result => {
      this.refs.autocomplete.setItems(result.body);
    });
  }

  // called when the user clicks an option or hits enter
  onSelect(user) {
    this.setState({
      selectedUser: user
    });
    // the returned value will be inserted into the input field.
    // Use an empty String to reset the field
    return user.getName();
  }

  render() {
    return (
      <div>
        <Autocomplete
          ref="autocomplete"
          renderItem={MyItemView}
          onChange={this.onChange}
          onSelect={this.onSelect}
        />
      </div>
    );
  }
}
```

## Develop

```bash
npm i

# to develop
npm run watch
```
npm package: @koliseoapi/react-menu
Description: A responsive menu that hides overflowing menu items under a three-dot button
Author: Nacho Coloma
Latest version: 2.1.0

# React Rug Menu

This responsive menu will hide any options that don't fit in the screen into
a popup menu ("under the rug"). It also works while resizing the window.

<a href="http://koliseoapi.github.io/react-rug-menu/">
<img src="http://koliseoapi.github.io/react-rug-menu/Screencast.mp4.gif" title="Click to go to the demo page">
</a>

Inspired in [OkayNav](https://github.com/VPenkov/okayNav), but developed for
React and React Router. The module itself is tiny (below 200 lines).

## Use

Use `MenuItem` as if it were a `Link` tag, and nest all items inside of `Menu`.

```
import { Menu, MenuItem } from "../lib/main";
import { Router, Route, hashHistory } from "react-router";
import ReactDOM from "react-dom";
import React from "react";

let MyAppComponent = React.createClass({

  render: function() {
    return (
      <div>
        <Menu>
          <MenuItem className="menu-item" to="events">Events</MenuItem>
          <MenuItem className="menu-item" to="books">Books</MenuItem>
          <MenuItem className="menu-item" to="go">Go</MenuItem>
          <MenuItem className="menu-item" to="cars">Cars</MenuItem>
        </Menu>
        { this.props.children }
      </div>
    )
  }

})

ReactDOM.render(
  <Router history={hashHistory}>
    <Route path="/" component={MyAppComponent}>
      <Route name="events" path="events" component={ eventComponent } />
      <Route name="books" path="books" component={ bookComponent } />
      <Route name="go" path="go" component={ goComponent } />
      <Route name="cars" path="cars" component={ carComponent } />
    </Route>
  </Router>,
  document.getElementsByClassName('test-container')[0]
);
```

## Accessibility

ARIA roles are automatically generated so that a screen reader will read all the menu items like any normal navigation menu.

## Develop

```bash
npm i

npm run build

npm run watch
```

There is no `build` step. The library is a single file in `lib/main.js` and published as is.