easy-combo-box/dist/index.js

A simple and easy React combo box component

import React from "react";
import { useState } from "react";
export default function ComboBox(props) {
    const [showList, setShowList] = useState(false);
    const [filter, setFilter] = useState("");
    function setShowListTrue() {
        setShowList(true);
    }
    function setShowListFalse() {
        setShowList(false);
    }
    function setShowListInvert() {
        setShowList(!showList);
    }
    return (React.createElement("div", { style: { position: "relative", display: "flex", flexDirection: "column", gap: "12px" } },
        React.createElement("input", { className: props.inputClassName || "", onChange: (e) => {
                setFilter(e.target.value);
                setShowListTrue();
            }, value: filter, placeholder: props.placeholder || "", type: "text", onClick: setShowListInvert }),
        showList ? (React.createElement("ul", { style: { position: "absolute", zIndex: "30", width: "100%", overflow: "auto", marginTop: "40px" }, className: props.listWrapperClassName || "" }, props.data.filter((current) => current.toLowerCase().includes(filter.toLowerCase())).map((current, index) => (React.createElement("li", { className: props.listItemClassName || "", key: index, onClick: () => {
                props.onClick(current);
                setFilter(current);
                setShowListFalse();
            } }, current))))) : null));
}