• JavaScript picker

React picker

Take a look at this example in CodeSandbox: working example

Picker component

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

import "jsuites/dist/jsuites.css";

export default function Picker({ options }) {
  const pickerRef = useRef(null);

  useEffect(() => {
    jSuites.picker(pickerRef.current, options);
  }, [options]);

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

Component usage

import { useState } from "react";

import Picker from "./Picker";

export default function App() {
  const [pickerValue, setPickerValue] = useState(0);

  const handlePickerChange = (element, instance, reserved, value, index) => {
    setPickerValue(parseInt(index, 10));
  };

  return (
    <>
      <h3>Picker example:</h3>
      <Picker
        options={{
          data: ["Verdana", "Arial", "Courier New"],
          onchange: handlePickerChange,
          value: pickerValue
        }}
      />
    </>
  );
}