danog/react-datalist-input
1
0
Fork 0
mirror of https://github.com/danog/react-datalist-input.git synced 2024-12-04 02:17:50 +01:00
Code Issues Projects Releases Wiki Activity

readme

Browse Source
This commit is contained in:
andrelandgraf 2019-06-24 20:57:49 +02:00
parent 186c277b32
commit 44002b8df9
2 changed files with 12 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
README.md
View File

@ -5,26 +5,13 @@ This package provides a single react component.
The component contains an input field with a drop down menu to pick a possible option based on the current input as a react component. The component contains an input field with a drop down menu to pick a possible option based on the current input as a react component.
Following features describe and might distinguish the component from other npm packages that offer a similar react component: Following features describe and might distinguish the component from other npm packages that offer a similar react component:
<br>
- Hand over an array of options (items) with label and key properties
- Feel free to add additional properties to access those on selection within your callback function
- On selection the selected item will be passed to the callback function
- Define your own matching algorithm to restrict which options should be shown in the drop down menu based on the current user input
- Or do not pass an own matching algorithm and just use the default match function
- The current user input will be highlighted (bold) within each label in the drop down menu
- The callback function will be triggered only if the key property has changed since the last selection
- Selecting the same item twice in a row will trigger the callback function only once (on the first selection)
Have a look at [w3schools.com](https://www.w3schools.com/howto/howto_js_autocomplete.asp) to see how you can do the same thing with pure html, css, and js. Have a look at [w3schools.com](https://www.w3schools.com/howto/howto_js_autocomplete.asp) to see how you can do the same thing with pure html, css, and js.
For more information about react and the ecosystem see this [guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md). For more information about react and the ecosystem see this [guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md).
## Check it out yourself
Have a look at this [demo app](https://stark-retreat-79786.herokuapp.com/) using the react-datalist-input component.
<br>The app is running on heroku for free, so I hope it is still up.
## Feedback ## Feedback
Feel free to get inspired and more importantly please provide [your feedback](https://github.com/andrelandgraf/react-datalist-input/issues) on structure and style. I'm more than happy to learn how to improve my code and architecture. Feel free to get inspired and more importantly please provide [your feedback](https://github.com/andrelandgraf/react-datalist-input/issues) on structure and style. I'm more than happy to learn how to improve my code and architecture.
## Installation ## Installation

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "react-datalist-input", "name": "react-datalist-input",
"version": "1.2.4", "version": "1.2.7",
"description": "This package provides a react component as follows: an input field with a drop down menu to pick a possible option based on the current input.", "description": "This package provides a react component as follows: an input field with a drop down menu to pick a possible option based on the current input.",
"main": "./lib/DataListInput.js", "main": "./lib/DataListInput.js",
"license": "MIT", "license": "MIT",