import React from "react";

// Install the Sous Chef library by running `npm i @7shifts/sous-chef`
import { AsyncSelectField } from "@7shifts/sous-chef";

const AsyncSelect = () => {

    /** This method makes a request to the remote data source with the search 
    * query every time the user types something in the select field. For 
    * initial/default options, you can define a special case for empty 
    * `inputValue` or you can have your API handle it to keep your frontend clean
    **/
    const fetchOptions = async (inputValue) => {

        // Fetch your options here
        const response = await fetch(
          "http://example.com/api/search?searchQuery=" + inputValue
        );
        const data = await response.json();

        /** You need to return a promise from this method with the options list 
        * and a boolean value indicating if there are more options available that
        * haven't been fetched. The return variable is not wrapped inside a 
        * `Promise()` object since the function has been made asynchronous using 
        * the async keyword and asynchronous functions always return promises.
        **/
        return {
            options: data.options,
            hasMore: data.hasMore
        }
    }
    
    /**
     * The component passed the `loadOptions` function as an option,
     * and it gets called every time the user types something
     * in the select field to search
     */
    return (
      <AsyncSelectField
          loadOptions={fetchOptions}
          name="language"
          placeholder="Async Select Field"
      />
    );
}

export default AsyncSelect
Using the AsyncSelectField component
