NostrUserSearch Component

Displays a search box and renders the search results.

Relies on NIP-50 queries to specific relays.

Usage

<nostr-user-search placeholder="Search users..." />

Attributes

• relays: Comma-separated list of relay URLs
• limit: Maximum number of results (default: 10)
• placeholder: Placeholder text for search input
• value: Initial search value
• template: ID of template element to use for custom rendering

Styling Parts

• wrapper: Main container
• input: Search input field
• results: Results container
• item: Individual result item
• picture: User profile picture
• name: User display name
• nip05: NIP-05 identifier

Events

• selected: Fired when an item is picked from the suggestion list. Event detail includes pubkey, npub and a metadata object.

External Templates

Supports external templates through the template attribute:

<template id="search-template">
  <div part="wrapper">
    <input type="search" part="input" />
    <ul part="results">
      <template>
        <li part="item">
          <img part="picture" />
          <span part="name"></span>
          <span part="nip05"></span>
        </li>
      </template>
    </ul>
  </div>
</template>

<nostr-user-search template="search-template" />