{"library":"react-mentions","title":"React Mentions Input Component","description":"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-mentions"],"cli":null},"imports":["import { MentionsInput } from 'react-mentions'","import { Mention } from 'react-mentions'","import type { MentionsInputProps } from 'react-mentions'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState, useCallback } from 'react';\nimport { MentionsInput, Mention } from 'react-mentions';\nimport './index.css'; // Assuming some basic styling for .mentions, .mention, .suggestions\n\nconst defaultStyle = {\n  control: {\n    backgroundColor: '#fff',\n    fontSize: 14,\n    fontWeight: 'normal',\n  },\n  '&multiLine': {\n    control: {\n      minHeight: 63,\n    },\n    highlighter: {\n      padding: 9,\n      border: '1px solid transparent',\n    },\n    input: {\n      padding: 9,\n      border: '1px solid silver',\n    },\n  },\n  suggestions: {\n    list: {\n      backgroundColor: '#fff',\n      border: '1px solid rgba(0,0,0,0.15)',\n      fontSize: 14,\n    },\n    item: {\n      padding: '5px 15px',\n      borderBottom: '1px solid rgba(0,0,0,0.15)',\n      '&focused': {\n        backgroundColor: '#cee4e5',\n      },\n    },\n  },\n};\n\nfunction MentionsEditor() {\n  const [value, setValue] = useState(\"Hello @[John Doe](john.doe) and @[Jane Smith](jane.smith)\");\n\n  const users = [\n    { id: 'john.doe', display: 'John Doe' },\n    { id: 'jane.smith', display: 'Jane Smith' },\n    { id: 'mike.tyson', display: 'Mike Tyson' },\n    { id: 'alice.wonder', display: 'Alice Wonderland' },\n  ];\n\n  const handleChange = useCallback((event, newValue, newPlainTextValue, mentions) => {\n    setValue(newValue);\n    console.log('New Value:', newValue);\n    console.log('Plain Text:', newPlainTextValue);\n    console.log('Mentions:', mentions);\n  }, []);\n\n  const fetchUsers = useCallback((query, callback) => {\n    if (!query) return callback(users);\n    const filteredUsers = users.filter(user =>\n      user.display.toLowerCase().includes(query.toLowerCase())\n    );\n    callback(filteredUsers);\n  }, [users]);\n\n  return (\n    <div className=\"editor-container\">\n      <h2>React Mentions Example</h2>\n      <MentionsInput\n        value={value}\n        onChange={handleChange}\n        style={defaultStyle} // Inline styles for quick demo, recommend external CSS\n        placeholder=\"Type @ to mention someone...\"\n      >\n        <Mention\n          trigger=\"@\"\n          data={fetchUsers}\n          renderSuggestion={(suggestion, search, highlightedDisplay) => (\n            <div>\n              {highlightedDisplay}\n            </div>\n          )}\n        />\n      </MentionsInput>\n      <div style={{ marginTop: '20px', border: '1px solid #eee', padding: '10px' }}>\n        <h3>Current Raw Input Value:</h3>\n        <pre>{value}</pre>\n      </div>\n    </div>\n  );\n}\n\nexport default MentionsEditor;\n","lang":"typescript","description":"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}