diff --git a/README.md b/README.md index 0a51df9b91..e773b7fb8f 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ Live demo: [jedwatson.github.io/react-select](http://jedwatson.github.io/react-s To build the examples locally, run: -``` +```javascript npm install npm start ``` @@ -36,7 +36,7 @@ It's loosely based on [Selectize](http://brianreavis.github.io/selectize.js/) (i The easiest way to use React-Select is to install it from NPM and include it in your own React build process (using [Browserify](http://browserify.org), etc). -``` +```javascript npm install react-select --save ``` @@ -57,7 +57,7 @@ The `value` property of each option should be set to either a string or a number When the value is changed, `onChange(newValue, [selectedOptions])` will fire. -``` +```javascript var Select = require('react-select'); var options = [ @@ -100,7 +100,7 @@ The select control will intelligently cache options for input strings that have Unless you specify the property `autoload={false}` the control will automatically load the default set of options (i.e. for `input: ''`) when it is mounted. -``` +```javascript var Select = require('react-select'); var getOptions = function(input, callback) { @@ -124,11 +124,46 @@ var getOptions = function(input, callback) { /> ``` +### Async options with Promises + +`asyncOptions` now supports Promises, which can be used in very much the same way as callbacks. + +Everything that applies to `asyncOptions` with callbacks still applies to the Promises approach (e.g. caching, autoload, ...) + +An example using the `fetch` API and ES6 syntax, with an API that returns an object like: + +```javascript +import Select from 'react-select'; + +/* + * assuming the API returns something like this: + * const json = [ + * { value: 'one', label: 'One' }, + * { value: 'two', label: 'Two' } + * ] + */ + +const getOptions = (input) => { + return fetch(`/users/${input}.json`) + .then((response) => { + return response.json(); + }).then((json) => { + return { options: json }; + }); +} + +` elements should be considered private and prone to change. -```js +```javascript // focuses the input element .focus(); ```