diff --git a/README.md b/README.md index aa6b5e0e..516a2c5c 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ Unfortunately, I don't have the time to maintain this project anymore. If you ar ## Demo -Check out the [Homepage](http://react-autosuggest.js.org) and the [Codepen examples](http://codepen.io/collection/DkkYaQ). +Check out the [Homepage](http://react-autosuggest.js.org) the [Jinno example](http://jinno.io/app/11?source=react-autosuggest) or the [Codepen examples](http://codepen.io/collection/DkkYaQ). ## Features @@ -157,7 +157,7 @@ class Example extends React.Component { | Prop | Type | Required | Description | | :--------------------------------------------------------------------- | :------- | :----------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [`suggestions`](#suggestions-prop) | Array | ✓ | These are the suggestions that will be displayed. Items can take an arbitrary shape. | +| [`suggestions`](#suggestions-prop) | Array | ✓ | These are the suggestions that will be displayed. Items can take an arbitrary shape. Check the [demo](http://jinno.io/app/11/suggestions?source=react-autosuggest) | | [`onSuggestionsFetchRequested`](#on-suggestions-fetch-requested-prop) | Function | ✓ | Will be called every time you need to recalculate `suggestions`. | | [`onSuggestionsClearRequested`](#on-suggestions-clear-requested-prop) | Function | ✓[\*](#on-suggestions-clear-requested-prop-note) | Will be called every time you need to set `suggestions` to `[]`. | | [`getSuggestionValue`](#get-suggestion-value-prop) | Function | ✓ | Implement it to teach Autosuggest what should be the input value when suggestion is clicked. | @@ -167,8 +167,8 @@ class Example extends React.Component { | [`onSuggestionSelected`](#on-suggestion-selected-prop) | Function | | Will be called every time suggestion is selected via mouse or keyboard. | | [`onSuggestionHighlighted`](#on-suggestion-highlighted-prop) | Function | | Will be called every time the highlighted suggestion changes. | | [`shouldRenderSuggestions`](#should-render-suggestions-prop) | Function | | When the input is focused, Autosuggest will consult this function when to render suggestions. Use it, for example, if you want to display suggestions when input value is at least 2 characters long. | -| [`alwaysRenderSuggestions`](#always-render-suggestions-prop) | Boolean | | Set it to `true` if you'd like to render suggestions even when the input is not focused. | -| [`highlightFirstSuggestion`](#highlight-first-suggestion-prop) | Boolean | | Set it to `true` if you'd like Autosuggest to automatically highlight the first suggestion. | +| [`alwaysRenderSuggestions`](#always-render-suggestions-prop) | Boolean | | Set it to `true` if you'd like to render suggestions even when the input is not focused. Check the [demo](http://jinno.io/app/11/alwaysRenderSuggestions?source=react-autosuggest) | +| [`highlightFirstSuggestion`](#highlight-first-suggestion-prop) | Boolean | | Set it to `true` if you'd like Autosuggest to automatically highlight the first suggestion. Check the [demo](http://jinno.io/app/11/highlightFirstSuggestion?source=react-autosuggest) | | [`focusInputOnSuggestionClick`](#focus-input-on-suggestion-click-prop) | Boolean | | Set it to `false` if you don't want Autosuggest to keep the input focused when suggestions are clicked/tapped. | | [`multiSection`](#multi-section-prop) | Boolean | | Set it to `true` if you'd like to display suggestions in multiple sections (with optional titles). | | [`renderSectionTitle`](#render-section-title-prop) | Function | ✓
when `multiSection={true}` | Use your imagination to define how section titles are rendered. | @@ -176,12 +176,12 @@ class Example extends React.Component { | [`renderInputComponent`](#render-input-component-prop) | Function | | Use it only if you need to customize the rendering of the input. | | [`renderSuggestionsContainer`](#render-suggestions-container-prop) | Function | | Use it if you want to customize things inside the suggestions container beyond rendering the suggestions themselves. | | [`theme`](#theme-prop) | Object | | Use your imagination to style the Autosuggest. | -| [`id`](#id-prop) | String | | Use it only if you have multiple Autosuggest components on a page. | +| [`id`](#id-prop) | String | | Use it only if you have multiple Autosuggest components on a page. Check the [demo](http://jinno.io/app/11/id?source=react-autosuggest) | #### suggestions (required) - +Demo [demo](http://jinno.io/app/11/suggestions?source=react-autosuggest) Array of suggestions to display. The only requirement is that `suggestions` is an array. Items in this array can take an arbitrary shape. For a plain list of suggestions, every item in `suggestions` represents a single suggestion. It's up to you what shape every suggestion takes. For example: