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

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

Last synced: 2 months ago
JSON representation

Accessible autocompletion widgets, implemented in React.

• Host: GitHub
• URL: https://github.com/hellojwilde/react-pick
• Owner: hellojwilde
• License: mit
• Fork: true (reactjs/react-autocomplete)
• Created: 2015-03-27T22:14:32.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2016-03-31T14:56:17.000Z (over 8 years ago)
• Last Synced: 2024-03-15T02:51:26.884Z (8 months ago)
• Language: JavaScript
• Homepage:
• Size: 4.48 MB
• Stars: 19
• Watchers: 3
• Forks: 6
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

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.