React dropdown

React dropdown and react autocomplete working example on codesandbox.

Dropdown component

import { useRef, useEffect } from "react";
import jSuites from "jsuites";

import "jsuites/dist/jsuites.css";

export default function Dropdown({ options }) {
  const dropdownRef = useRef(null);

  useEffect(() => {
    jSuites.dropdown(dropdownRef.current, options);
  }, [options]);

  return <div ref={dropdownRef} />;
}

Component usage

import { useState, useRef } from "react";

import Dropdown from "./Dropdown";

export default function App() {
  const [dropdownValue, setDropdownValue] = useState("");

  const data = useRef(["Dog", "Cat", "Bird", "Fish"]);

  const handleDropdownChange = (element, index, oldValue, newValue) => {
    setDropdownValue(newValue);
  };

  return (
    <>
      <h3>Dropdown example:</h3>
      <Dropdown
        options={{
          value: dropdownValue,
          onchange: handleDropdownChange,
          data: data.current,
          newOptions: true
        }}
      />
    </>
  );
}