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 }} /> </> ); }