{"_id":"@accessible-react-mentions/react","name":"@accessible-react-mentions/react","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@accessible-react-mentions/react","version":"0.1.0","description":"Unstyled, strictly WCAG 2.2-compliant React mentions component built on the WAI-ARIA 1.2 combobox-with-listbox pattern.","license":"MIT","type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"dependencies":{"@floating-ui/react":"^0.27.0","@accessible-react-mentions/core":"0.1.0"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"devDependencies":{"@testing-library/dom":"^10.4.1","@testing-library/jest-dom":"^6.6.3","@testing-library/react":"^16.1.0","@testing-library/user-event":"^14.5.2","@types/react":"^19.0.1","@types/react-dom":"^19.0.2","@vitest/browser":"^4.1.5","jsdom":"^29.1.0","react":"^19.0.0","react-dom":"^19.0.0","tsdown":"^0.21.10","typescript":"^6.0.3","vitest":"^4.1.5"},"publishConfig":{"access":"public"},"scripts":{"build":"tsdown","dev":"tsdown --watch","test":"vitest run","typecheck":"tsc --noEmit"},"_id":"@accessible-react-mentions/react@0.1.0","_integrity":"sha512-aL3Ty4bhXKRcQW1qVaEkzSWEvlR3N6SqdJmORzKXoqW9wBFJJrtDlbnqKnNEV+dfAici8OgzJ13GrghNtXH92g==","_resolved":"/private/var/folders/39/9xywyt255_d0vfpsvctvjmz80000gn/T/25f222bf559dcabf38602147f33e50cd/accessible-react-mentions-react-0.1.0.tgz","_from":"file:accessible-react-mentions-react-0.1.0.tgz","_nodeVersion":"24.14.0","_npmVersion":"11.9.0","dist":{"integrity":"sha512-aL3Ty4bhXKRcQW1qVaEkzSWEvlR3N6SqdJmORzKXoqW9wBFJJrtDlbnqKnNEV+dfAici8OgzJ13GrghNtXH92g==","shasum":"2a13c67e6816fd93d1e7d4dc6a9f2e255e62bc22","tarball":"https://registry.npmjs.org/@accessible-react-mentions/react/-/react-0.1.0.tgz","fileCount":12,"unpackedSize":56951,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQD4qsQgcgr1Sdh6LYxxp0HqQLJSw7zYlnCGyv+MxRMLDgIgPmTnZY0+XxoS0AvLK5Q+fJFquzrAjwJMqNl699GEjjM="}]},"_npmUser":{"name":"karan715","email":"karanthakur715@gmail.com"},"directories":{},"maintainers":[{"name":"karan715","email":"karanthakur715@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react_0.1.0_1777372347525_0.9774649776668771"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-28T10:32:27.423Z","0.1.0":"2026-04-28T10:32:27.674Z","modified":"2026-04-28T10:32:27.931Z"},"maintainers":[{"name":"karan715","email":"karanthakur715@gmail.com"}],"description":"Unstyled, strictly WCAG 2.2-compliant React mentions component built on the WAI-ARIA 1.2 combobox-with-listbox pattern.","license":"MIT","readme":"# @accessible-react-mentions/react\n\nUnstyled, **strictly WCAG 2.2-compliant** React mentions component built on the WAI-ARIA 1.2 [Combobox With Listbox Popup](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) pattern.\n\nPart of [accessible-react-mentions](https://github.com/karan-t/accessible-react-mentions).\n\n## Install\n\n```sh\npnpm add @accessible-react-mentions/react @floating-ui/react\n```\n\nPeers: `react@^18 || ^19`, `react-dom@^18 || ^19`, `@floating-ui/react@^0.27`.\n\n## Minimal example\n\n```tsx\nimport { Mention, type TriggerConfig } from '@accessible-react-mentions/react';\nimport { useMemo, useState } from 'react';\n\nconst USERS = [\n  { id: '1', display: 'Ada Lovelace' },\n  { id: '2', display: 'Linus Torvalds' },\n];\n\nexport function MessageBox() {\n  const [value, setValue] = useState('');\n  const triggers = useMemo<TriggerConfig[]>(() => [\n    {\n      char: '@',\n      source: async (q) =>\n        USERS.filter((u) => u.display.toLowerCase().includes(q.toLowerCase())),\n    },\n  ], []);\n\n  return (\n    <Mention.Root triggers={triggers} onChange={(raw) => setValue(raw)}>\n      <Mention.Input rows={4} placeholder=\"Use @ to mention a teammate.\" />\n      <Mention.Listbox render={(ctx) =>\n        ctx.items.map((item, i) => (\n          <Mention.Item key={item.id} index={i} item={item}>\n            {item.display}\n          </Mention.Item>\n        ))\n      } />\n    </Mention.Root>\n  );\n}\n```\n\n## What you get for free\n\n- WAI-ARIA 1.2 combobox semantics on the textarea (`role=\"combobox\"`, `aria-expanded`, `aria-controls`, `aria-activedescendant`)\n- Polite live-region announcements (\"5 suggestions available. Ada Lovelace highlighted.\")\n- Keyboard model: `↑/↓`, `Home/End`, `PageUp/PageDown`, `Enter`, `Escape`, `Tab` (configurable)\n- Debounced + cancellable requests with an in-memory LRU cache\n- Empty-query results (typing `@` alone calls `source('', …)` for recents/teammates)\n\nShips zero styles. Pair with [`@accessible-react-mentions/theme-default`](../theme-default) or your own.\n\n## Docs\n\n[accessible-react-mentions.vercel.app](https://accessible-react-mentions.vercel.app)\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-a6fca7bf36e435c360be3b37435647a6"}