Function useSuggestions

Custom hook for managing suggestion dropdown behavior in search components

Features:

Manages visibility state of suggestions dropdown
Handles click-outside detection for auto-closing
Provides ref for suggestion container
Integrates with SearchSuggestions component

Example

  return (
    <div>
      <input
        onFocus={() => setShowSuggestions(true)}
        // ... other input props
      />
      {showSuggestions && username.length >= 2 && (
        <SearchSuggestions
          searchLoading={searchLoading}
          searchData={data}
          onSuggestionClick={() => setShowSuggestions(false)}
          suggestionRef={suggestionRef}
        />
      )}
    </div>
  );
}

useSuggestions(): {
    setShowSuggestions: Dispatch<SetStateAction<boolean>>;
    showSuggestions: boolean;
    suggestionRef: RefObject<HTMLDivElement>;
}
Returns {
    setShowSuggestions: Dispatch<SetStateAction<boolean>>;
    showSuggestions: boolean;
    suggestionRef: RefObject<HTMLDivElement>;
}
Hook state and methods
- Defined in hooks/useSuggestions.ts:38

Function useSuggestions

Example

Returns { setShowSuggestions: Dispatch<SetStateAction<boolean>>; showSuggestions: boolean; suggestionRef: RefObject<HTMLDivElement>;}

Settings

Returns {
setShowSuggestions: Dispatch<SetStateAction<boolean>>;
showSuggestions: boolean;
suggestionRef: RefObject<HTMLDivElement>;
}