Research
Security News
Malicious npm Package Typosquats react-login-page to Deploy Keylogger
Socket researchers unpack a typosquatting package with malicious code that logs keystrokes and exfiltrates sensitive data to a remote server.
react-datalist-input
Advanced tools
Readme
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
Unknown package
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.
Research
Security News
Socket researchers unpack a typosquatting package with malicious code that logs keystrokes and exfiltrates sensitive data to a remote server.
Security News
The JavaScript community has launched the e18e initiative to improve ecosystem performance by cleaning up dependency trees, speeding up critical parts of the ecosystem, and documenting lighter alternatives to established tools.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.