Skip to main content

AsyncDropdown

Reference​

  • The AsyncDropdown component is a custom dropdown.
  • It is designed to load options asynchronously, making it ideal for scenarios where the dropdown options are fetched from an API or other dynamic data sources.
  • It fetches dropdown options dynamically as the user types or interacts with the component.
  • It supports single-select and multi-select modes, custom styles, and placeholder text.

Props​

  • value: The currently selected value(s). For single-select, it is an object. For multi-select, it is an array of selected objects.
  • isMultiselect: Determines whether the dropdown allows multiple selections (true) or a single selection (false).
  • onValueChange: A callback function triggered when the selected value(s) change. It receives the new value(s) as an argument.
  • onFocusOut: A callback function triggered when the dropdown loses focus.
  • defaultOptions: The default options to display in the dropdown before the user starts typing. If true, it loads options immediately.
  • loadOptions: A function that fetches options asynchronously. It is called with the user's input and should return a promise that resolves to an array of options.
  • isDisabled: Disables the dropdown when set to true.
  • placeholder: Custom placeholder text for the dropdown. If not provided, a default placeholder is used based on the isMultiselect prop.
  • style: Custom styles for the dropdown. These styles are merged with the default styles defined in customStyles.
  • noOptionsMessage: A function that returns the message to display when no options are available.
  • menuPlacement: Controls the placement of the dropdown menu. Possible values are 'auto', 'top', or 'bottom'. default value is auto.

Usage Example​

function Example(pageContext) {
  const { protrakComponents } = React.useContext(customWidgetContext);
  const { AsyncDropdown } = protrakComponents;
  const [selectedValue, setSelectedValue] = React.useState(null);

  const loadOptions = (inputValue) => {
    // Simulate an API call
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(
          [
            { label: 'Option 1', value: 'option1' },
            { label: 'Option 2', value: 'option2' },
            { label: 'Option 3', value: 'option3' },
          ].filter((option) =>
            option.label.toLowerCase().includes(inputValue.toLowerCase())
          )
        );
      }, 1000);
    });
  };

  const handleValueChange = (newValue) => {
    setSelectedValue(newValue);
    console.log('Selected Value:', newValue);
  };

  return (
    <AsyncDropdown
      value={selectedValue}
      isMultiselect={false}
      onValueChange={handleValueChange}
      loadOptions={loadOptions}
      placeholder="Search for an option"
      noOptionsMessage={() => 'No options found'}
    />
  );
};