Function SearchSuggestions

Displays a dropdown list of GitHub user search suggestions

Features:

  • Real-time search results display
  • Loading state handling
  • Empty state messaging
  • User avatar and name display
  • Click outside detection
  • Dark mode support

Visual States:

  • Loading: Shows loading indicator
  • Empty: Displays "No users found" message
  • Results: List of matching users with avatars
  • Error: Handles null data gracefully

Interaction:

  • Click selection of users
  • Hover states for items
  • Focus management
  • Click outside to dismiss

Example

<SearchSuggestions
  searchLoading={isLoading}
  searchData={data}
  onSuggestionClick={(login) => handleSelection(login)}
  suggestionRef={dropdownRef}
/>
  • SearchSuggestions(props: SearchSuggestionsProps): Element

  • Parameters

    • props: SearchSuggestionsProps

      Component properties

      Props for the SearchSuggestions component

      SearchSuggestionsProps

      • onSuggestionClick: (login: string) => void

        Callback when a suggestion is clicked

      • searchData: null | { search: { nodes: SearchUser[] } }

        Search results data containing user nodes

      • searchLoading: boolean

        Loading state for search operation

      • suggestionRef: RefObject<HTMLDivElement>

        Ref for dropdown container

    Returns Element

    The search suggestions dropdown

Settings

Member Visibility