Migrating from react-mentions
The plan
Section titled “The plan”@accessible-react-mentions/compat-react-mentions will export MentionsInput and Mention JSX matching the react-mentions public API, backed by our headless core. For most consumers this is a one-line import swap:
import { MentionsInput, Mention } from 'react-mentions';import { MentionsInput, Mention } from '@accessible-react-mentions/compat-react-mentions';The value-format design choice (markdown-style @[Display](id) tokens) was made specifically so that this compat layer is a thin shim, not a parser bridge.
What changes for free
Section titled “What changes for free”- WAI-ARIA 1.2 combobox semantics (
react-mentionsships none) - Polite live-region announcements
- Correct keyboard model with
aria-activedescendant - Smaller, modern bundle
What you may need to adjust
Section titled “What you may need to adjust”- Custom render props that depend on
react-mentions’s internal classes - Mention styles, since the new component does not ship default CSS — pair with
@accessible-react-mentions/theme-defaultor your own