MentionPicker

App

@-trigger autocomplete picker. Headless: takes users + query + position, fires onSelect. Keyboard nav (ArrowUp/Down, Enter/Tab, Escape).

Filtered list

Preview
"al"
  • AB

    Alice Brooks

    @aliceb

  • DA

    Diego Alvarez

    @diegoa

Code
<MentionPicker users={users} query="ay" onSelect={(u) => {}} onCancel={() => {}} />

Empty results

Preview
"zzz"

No matching users

Code
<MentionPicker users={users} query="zzz" onSelect={(u) => {}} onCancel={() => {}} />
Sourcemodules/app/MentionPicker.tsx