Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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.
- 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 (9 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.