React dropdown
Dropdown working example
Dropdown component
import React, { useRef, useEffect } from "react";
import jSuites from "jsuites";
import "../node_modules/jsuites/dist/jsuites.css";
import "../node_modules/jsuites/dist/jsuites.layout.css";
export default function Dropdown({ options: { value, onchange, ...options } }) {
const dropdownRef = useRef(null);
const jsuitesDropdownRef = useRef(null);
useEffect(() => {
jsuitesDropdownRef.current = jSuites.dropdown(dropdownRef.current, options);
const localDropdownRef = dropdownRef.current;
return () => {
localDropdownRef.classList.remove(["jdropdown-default", "jdropdown"]);
localDropdownRef.innerHTML = "";
};
}, [options]);
useEffect(() => {
jsuitesDropdownRef.current.setValue(value);
}, [value, options]);
useEffect(() => {
jsuitesDropdownRef.current.options.onchange = onchange;
}, [onchange]);
return <div ref={dropdownRef}></div>;
}
Component usage
import React, { useState } from "react";
import Dropdown from "./Dropdown";
export default function App() {
const [dropdownValue, setDropdownValue] = useState([]);
const handleDropdownChange = (element, index, oldValue, newValue) => {
setDropdownValue(newValue.split(";"));
};
return (
<Dropdown
options={{
value: dropdownValue,
onchange: handleDropdownChange,
data: ["Dog", "Cat", "Bird", "Fish"],
autocomplete: true,
lazyLoading: true,
multiple: true,
width: "280px"
}}
/>
);
}