Editable Creatable Multiselect Dropdown For React

A simple multi-select dropdown for react that allows adding custom items to the list and editing existing items.

npm install editable-creatable-multiselect

Demo

See demo at https://moh77.csb.app/

Example Code

import MultiSelect from "editable-creatable-multiselect";
import {useState} from "react";

function App() {
    const [suggestions, setSuggestions] = useState([{name: 'Microsoft', id:1}, {name: 'Apple', id:2}, {name: 'Google', id:3}, {name: 'JetBrains', id:4}, {name: 'Airbnb', id:5}, {name: 'Amazon', id:6}, {name: 'Tesla', id:7}, {name: 'NVIDIA', id:8}, {name: 'Samsung', id:9}, {name: 'Netflix', id:10}, {name: 'Palantir', id:11}]);
    const [selectedList, setSelectedList] = useState([]);

    return (
        <div className="App">
            <MultiSelect
                suggestions={suggestions}
                selectedItems={selectedList}
                updateSuggestions={(response) => {
                    console.log("suggestion: ")
                    console.log(response);
                    setSuggestions(response.list);
                }}
                updateSelectedItems={(response) => {
                    console.log("selection: ")
                    console.log(response);
                    // let's add removed items to the suggestion
                    if (response.removedItem){
                        setSuggestions([...suggestions, response.removedItem]);
                    }
                    setSelectedList(response.list);
                }}
                displayField={"name"}
                maxDisplayedItems={5}
                disabled={false}
                editFieldPosBelow={true}
                autoAddOnBlur={false}
                placeholder={"Type the name of the desired company or choose one."}/>
        </div>
    );
}

export default App;

Props Description

| Props | Description | |------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | suggestions | a list of objects that are displayed in dropdown. eg: [{name:"Google"}, {name:"Microsoft"}] | | selectedItems | list that contains selected items. Can be empty initially. This list will be used subsequently to show what items are selected | | updateSuggestions | a callback function. Triggers if user selects item from the dropdown OR an item is deleted from the selected items. | | updateSelectedItems | a callback function. Triggers if user clicks a selectedItem OR an item is chosen from the dropdown OR an item is deleted from the selected items OR a new item is added to the list. | | displayField | Object key that you want to be displayed in the dropdown list and selected items. Default: "name". Eg: if suggestions list is [{name:"Google"}, {name:"Microsoft"}], we can set displayField={"name"} | | maxDisplayedItems | Maximum number of items that can appear in the list. [Optional] | | placeholder | Placeholder for the input field. [Optional] | | disabled | Boolean. Whether the component is disabled or enabled. [Optional] | | editFieldPosBelow | Boolean. Whether the edit box should appear downwards or upwards. Default: false. [Optional] | | autoAddOnBlur | Boolean. When the input loses focus, should text in input box automatically be added to the list? Default: false. [Optional] |

Callbacks

updateSuggestions

updateSuggestions={(responseObject) => {
    // Handle callback here
}}

responseObject properties

| Parameters | Desc | |---------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | list | List of items currently in the dropdown list. | | removedItem | Contains item removed from dropdown list. If user chooses an item from the dropdown, it's removed from the dropdown list. Note this is different than removedItem in updateSelectedItems callback. |

updateSelectedItems

updateSelectedItems={(responseObject) => {
    // Handle callback here
}}

responseObject properties

| Parameters | Desc | |-------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | list | List of items currently selected by user. | | addedItem | New item that is added to user's selection. Can be added from dropdown list or can be added manually by user (if added by user, isCreatedByUser flag is set true. | | removedItem | Contains item that has been deleted by user. | | isCreatedByUser | Boolean. This is set true whenever a new item is added to the list. Otherwise, false. | | editedItem | Item that has been edited by the user. If not edited, it's undefined. |