react-input-chips/dist/index.js

A package with minimum dependencies and maximum customization.

// src/components/InputChip.tsx
import { jsx, jsxs } from "react/jsx-runtime";
var InputChips = ({
  chips,
  setChips,
  inputValue,
  setInputValue,
  keysToTriggerChipConversion = ["Enter", ","],
  needWhiteSpace = true,
  validate,
  disabled = false,
  placeholder,
  nextPlaceholder,
  removeBtnSvg,
  chipStyles,
  containerStyles
}) => {
  const handleInputChange = (e) => {
    if (needWhiteSpace) {
      setInputValue(e.target.value);
    } else {
      setInputValue(e.target.value.trim());
    }
  };
  const handleInputKeyDown = (e) => {
    if (keysToTriggerChipConversion.includes(e.key) && (!validate || validate())) {
      const regex = new RegExp(
        `[${keysToTriggerChipConversion.join("")}]`,
        "g"
      );
      const chip = inputValue.trim().replace(regex, "");
      if (chip) {
        setChips([...chips, chip]);
        setInputValue("");
      }
      e.preventDefault();
    }
  };
  const removeChip = (e, chipToRemove) => {
    e.preventDefault();
    const filteredChips = chips.filter(
      (chip, index) => chip + index !== chipToRemove
    );
    setChips(filteredChips);
  };
  return /* @__PURE__ */ jsxs("div", { className: "chip-input-warpper", style: containerStyles ?? {}, children: [
    chips?.map((chip, index) => /* @__PURE__ */ jsxs(
      "div",
      {
        "data-testid": `input-value-chip-${index}`,
        className: "chip",
        style: chipStyles ?? {},
        children: [
          chip,
          /* @__PURE__ */ jsx(
            "button",
            {
              type: "button",
              className: "closeBtn",
              "data-testid": `remove-chip-btn-${index}`,
              onClick: (e) => removeChip(e, chip + index),
              children: removeBtnSvg || /* @__PURE__ */ jsxs(
                "svg",
                {
                  stroke: "currentColor",
                  fill: "currentColor",
                  strokeWidth: "0",
                  viewBox: "0 0 24 24",
                  height: 15,
                  children: [
                    /* @__PURE__ */ jsx("path", { fill: "none", d: "M0 0h24v24H0z" }),
                    /* @__PURE__ */ jsx("path", { d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })
                  ]
                }
              )
            }
          )
        ]
      },
      chip + index
    )),
    /* @__PURE__ */ jsx(
      "input",
      {
        className: "chip-input",
        type: "text",
        placeholder: disabled ? "" : chips.length ? nextPlaceholder : placeholder,
        value: inputValue,
        onChange: handleInputChange,
        onKeyDown: handleInputKeyDown,
        disabled
      }
    )
  ] });
};
var InputChip_default = InputChips;
export {
  InputChip_default as InputChips
};
//# sourceMappingURL=index.js.map