react-datalist-input

Info

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.

Feedback

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

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>
);

Properties

items

• Required property!
• The array of options for the drop down menu.
  
• Every item inside the array needs to have following properties:
  • key : an id that identifies the item within the array
  • label: the label that will be shown in the drop down menu

onSelect

• Required property!
• The callback function that will be called if the user selects one item of the drop down menu.
• Gets only called if the item changes. Selecting the same item twice will only trigger the function once (the first time).
• Parameter: (selectedKey)
  • selectedKey: the Key Property of the item that the user selected

match

• Pass a match function as stated above for creating your own matching algorithm for the autocomplete functionality.

• Parameter: (currentInput, item)

  • currentInput: String, the current user input typed into the input field
  • item: Object, the item of the items array (with key and label properties)

• 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

• The placeholder that will be shown inside the input field.
• Default is an empty string

itemClassName

• Additional classes to style each input field in the dropdown menu.
• Default is an empty string
• Removes the default styling if set

activeItemClassName

• Additional classes to style the active input field.
• Default is an empty string
• Removes the default styling if set

inputClassName

• Additional classes to style the input field.
• Default is an empty string
• Removes the default styling if set

dropdownClassName

• Additional classes to style the dropdown box.
• Default is an empty string
• Adds on the required styling (e.g. position:absolute)
• Removes the default styling if set

requiredInputLength

• Number to specify the threshold until when the dropdown menu should appear.
• Example requiredInputLength=3, only if the user input is longer than 2 characters, the dropdown menu will appear.
• Default is zero.

clearInputOnSelect

• Should the input field be cleared on select on filled with selected item?
• Default is false.

suppressReselect

• If suppressReselect is set to false, selecting the same item again, it will trigger another onSelect callback call.
• Default is true.

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.

initialValue

• Specigy an initial value for the input field.
• For example, initialValue={'hello world'} will print hello world into the input field on first render.
• Default is empty string.