npm i react-datalist-input

import React, { useState, useMemo, useCallback } from 'react';

// Import the DataListInput component

import DataListInput from 'react-datalist-input';

// Integrate the css file if you want to use the default styling

import 'react-datalist-input/dist/styles.css';

​

// Your data source

const options = [

  { name: 'Chocolate' },

  { name: 'Coconut' },

  { name: 'Mint' },

  { name: 'Strawberry' },

  { name: 'Vanilla' },

];

​

const YourComponent = ({ options }) => {

  const [item, setItem] = useState(); // The selected item will be stored in this state.

​

  /**

   * The onSelect callback function is called if the user selects one option out of the dropdown menu.

   * @param selectedItem object (the selected item / option)

   */

  const onSelect = useCallback((selectedItem) => {

    console.log('selectedItem', selectedItem);

    setItem(selectedItem);

  }, []);

​

  // Make sure each option has an unique id and a value

  const items = useMemo(

    () =>

      options.map((option) => ({

        // required: id and value

        id: option.name,

        value: option.name,

        // optional: label, node

        // label: option.name, // use a custom label instead of the value

        // node: option.name, // use a custom ReactNode to display the option

        ...option, // pass along any other properties to access in your onSelect callback

      })),

    [],

  );

​

  return (

    <DatalistInput label="Select your favorite flavor" placeholder="Chocolate" items={items} onSelect={onSelect} />

  );

};