Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/hellojwilde/react-pick

Accessible autocompletion widgets, implemented in React.
https://github.com/hellojwilde/react-pick

Last synced: 4 months ago
JSON representation

Accessible autocompletion widgets, implemented in React.

Awesome Lists containing this project

README

        

# react-pick

[![Build Status](https://travis-ci.org/hellojwilde/react-pick.svg?branch=master)](https://travis-ci.org/hellojwilde/react-pick)

Accessible autocompletion components (e.g. typeahead inputs, popups, and comboboxes), implemented in React.

Intially derived from Ryan Florence's awesome [react-autocomplete](https://github.com/rackt/react-autocomplete).

## Demos

- Pick a US state: [http://jwilde.me/react-pick/basic/](http://jwilde.me/react-pick/basic/)
- Pick a set of Flickr images: [http://jwilde.me/react-pick/flickr/](http://jwilde.me/react-pick/flickr/)

## Installation & Usage

`npm install react-pick`

You'll need to make sure you're including the `styles.css` file in the root of the npm module in your app somehow. Or write your own, better stylesheet.

### What's inside?

For out-of-the-box usage:

- [``](https://github.com/hellojwilde/react-pick/blob/master/src/Combobox.js) - Supports find displaying asynchronous autocomplete suggestions inline as "type ahead" text, as a popup menu, and as both at once. Supports keyboard navigation, and seeks to be WAI-ARIA compliant.

For customizing `` and creating your own components:

- [``](https://github.com/hellojwilde/react-pick/blob/master/src/TypeaheadInput.js) - An `` that robustly inserts "type ahead" text.
- [``](https://github.com/hellojwilde/react-pick/blob/master/src/InputWithPopup.js) - Attaches a popup to an ``.
- [``](https://github.com/hellojwilde/react-pick/blob/master/src/List.js) - A popup for rendering a list of possible completion options.
- [``](https://github.com/hellojwilde/react-pick/blob/master/src/ListOption.js) - The default component for rendering options in ``.

### How do you use ``?

Pretty much the same way you would the `` component in React, but with an extra `getOptionsForInputValue` property to fetch autocompletion options.

```js
var React = require('react');
var {Combobox} = require('react-pick');

var AWESOME_PEOPLE = [
'Ryan Florence',
'Pete Hunt',
'Jonathan Wilde'
];

var MyAppWithACombobox = React.createClass({

getInitialState: function() {
return {value: null};
},

getOptionsForInputValue: function(inputValue) {
return new Promise(function(resolve, reject) {
inputValue = inputValue.toLowerCase();

resolve(
AWESOME_PEOPLE
.map((person) => person.toLowerCase())
.filter((person) => person.indexOf(inputValue) === 0)
);
});
},

handleChange: function(newValue) {
this.setState({value: newValue});
},

render: function() {



Selection: {this.state.value}



}

});
```

Check out more [examples](https://github.com/hellojwilde/react-pick/tree/master/examples).

### What sorts of components can you build with it?

- [react-pick-datetime](https://github.com/hellojwilde/react-pick-datetime) - Components for selecting dates and times.