React Mentions is a component library providing a flexible, accessible textarea input field with built-in mention functionality, similar to what's found on social media platforms like Twitter or Facebook. The current stable version is 4.4.10, with frequent patch releases addressing bug fixes and minor improvements, and occasional minor versions for new features or refactorings. Its core strength lies in supporting multiple, distinct mention types (e.g., users, tags) within a single input, each configurable with its own trigger character and custom rendering logic for suggestions. It differentiates itself by offering robust control over suggestion display (e.g., portal host, force suggestions above cursor) and comprehensive event callbacks, making it suitable for complex interaction patterns in production applications. It is not a full-featured text editor but focuses specifically on the mentions use case.
npm install react-mentionsVerified import paths — ran on the pinned version, not inferred.
This quickstart demonstrates a basic React Mentions setup, allowing users to type '@' to trigger suggestions for mentioning predefined users. It includes state management for the input value, a data source function for suggestions, and a custom suggestion renderer, showcasing how to integrate the component into a React application. Basic inline styles are provided for immediate visibility.
Use the `inputRef` prop on `MentionsInput` to get a ref to the underlying HTML element, and then imperatively call `inputRef.current.focus()` when needed, e.g., in a `useEffect` hook with an empty dependency array for initial mount.
Refer to the `react-mentions` documentation for the recommended CSS structure and prop-based styling (e.g., `style` prop for `MentionsInput` and `suggestions`). Avoid overly aggressive global CSS rules that might interfere with its internal layout.
Provide a valid DOM element to `suggestionsPortalHost` (e.g., `document.body` or a specific `div` element). If the host is dynamically rendered, ensure the `MentionsInput` re-renders or updates its portal when the host becomes available. Consider using `React.createRef` for the host element and passing `hostRef.current`.
Always destructure or access all relevant arguments from the `onChange` callback: `(event, newValue, newPlainTextValue, mentions) => { /* use all here */ }`. Use `newValue` for storing the rich-text content, and `newPlainTextValue` for display purposes where markup is undesirable.Only set `allowSpaceInQuery={true}` if your mention data source truly supports multi-word searches (e.g., searching for 'John Doe'). For typical single-name mentions, keep it `false` (default) to close suggestions after a space, which is often more intuitive.Add at least one `<Mention trigger="@" data={yourDataSource} />` child inside your `<MentionsInput>` component.Ensure the `data` prop is either an array of objects (e.g., `[{ id: 'id', display: 'Name' }]`) or a function that takes a `query` string and a `callback` function.Ensure your project is configured for ES Modules. If using an older React setup or specific testing frameworks, you might need to adjust Babel/Webpack configurations to correctly handle ESM. For `react-mentions`, always use `import { MentionsInput, Mention } from 'react-mentions'` in modern React projects.