Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update README.md #797

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Update README.md #797

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
72cbedb
Update README.md
morZloof Jul 6, 2021
65e2d03
Update README.md
morZloof Jul 6, 2021
8e52919
Update README.md
morZloof Jul 6, 2021
5496ea2
Update README.md
morZloof Jul 6, 2021
c6c3174
Update README.md
morZloof Jul 6, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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. |
Expand All @@ -167,21 +167,21 @@ 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 | ✓<br>when `multiSection={true}` | Use your imagination to define how section titles are rendered. |
| [`getSectionSuggestions`](#get-section-suggestions-prop) | Function | ✓<br>when `multiSection={true}` | Implement it to teach Autosuggest where to find the suggestions for every section. |
| [`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) |

<a name="suggestions-prop"></a>

#### 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:
Expand Down