Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
react-datalist-input
Advanced tools
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.
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.
Following features describe and might distinguish the component from other npm packages that offer a similar react component:
Have a look at w3schools.com 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.
Have a look at this demo app using the react-datalist-input component.
The app is running on heroku for free, so I hope it is still up.
Feel free to get inspired and more importantly please provide your feedback on structure and style. I'm more than happy to learn how to improve my code and architecture.
Installation via npm
npm install react-datalist-input --save
Basic Usage
import DataListInput from 'react-datalist-input';
/**
* create your own match algorithm if you want to do so
* @param currentInput String (the current user input)
* @param item (one item of the items array)
* @returns {boolean}
*/
matchCurrentInput = (currentInput, item) => {
const yourLogic = item.someAdditionalValue;
return (yourLogic.substr(0, currentInput.length).toUpperCase() === currentInput.toUpperCase());
};
/**
* your callback function gets called if the user selects one option out of the drop down menu
* @param selectedItem object (the selected item / option)
* @returns {*}
*/
onSelect = (selectedItem) => {
this.doSomething(selectedItem);
};
render() {
// the array you want to pass to the react-data-list component
// each element at least needs a key and a label
const items = this.props.values.map((item, i) => {
return {
// what to show to the user
label: item.id + ": " + item.name,
// key to identify the item within the array
key: item.id,
// feel free to add your own app logic to access those properties later on
someAdditionalValue: item.someAdditionalValue,
}
});
return(
<div>
<DataListInput placeholder={"Select an option from the drop down menu..."}
items={items} onSelect={this.onSelect} match={this.matchCurrentInput}/>
</div>
);
items
onSelect
match
Pass a match function as stated above for creating your own matching algorithm for the autocomplete functionality.
Parameter: (currentInput, item)
Default:
/**
* default function for matching the current input value (needle) and the values of the items array
* @param currentInput String (the current user input)
* @param item (one item of the items array)
* @returns {boolean}
*/
match = (currentInput, item) => {
return item.label.substr(0, currentInput.length).toUpperCase() === currentInput.toUpperCase();
};
placeholder
itemClassName
activeItemClassName
inputClassName
requiredInputLength
requiredInputLength=3
, only if the user input is longer than 2 characters, the dropdown menu will appear.clearInputOnSelect
suppressReselect
dropDownLength
Only display the first dropDownLength
matches in the dropdown. Useful if the array is really big.
Number to specify max length of drop down.
Default is Infinity.
FAQs
react-datalist-input provides a React datalist/combobox component called DatalistInput. The component contains an input field with a dropdown menu of suggestions based on the current input.
The npm package react-datalist-input receives a total of 1,293 weekly downloads. As such, react-datalist-input popularity was classified as popular.
We found that react-datalist-input demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.