react-mentions-ts

import { useState } from 'react'
import { MentionsInput, Mention } from 'react-mentions-ts'

const users = [
  { id: 'walter', display: 'Walter White' },
  { id: 'jesse', display: 'Jesse Pinkman' },
]

function MyComponent() {
  const [value, setValue] = useState('')

  return (
    <MentionsInput value={value} onMentionsChange={({ value: nextValue }) => setValue(nextValue)}>
      <Mention trigger="@" data={users} />
    </MentionsInput>
  )
}

Flexible Triggers

Any character, string, or custom RegExp — @, #, :, or your own pattern.

Async Data Loading

Real-time filtering with debouncing, AbortSignal cancellation, and cursor pagination.

TypeScript First

Written in TypeScript with complete type definitions and generic mention data.

Accessible

WAI-ARIA combobox pattern, screen-reader announcements, keyboard navigation — enforced by an axe-core test suite.

Clipboard Fidelity

Copy/cut/paste preserves mentions via text/react-mentions and text/html payloads, even across apps.

Forms & SSR Ready

Uncontrolled mode with native <form> integration, plus Next.js/SSR compatibility out of the box.