Gathering detailed insights and metrics for rc-mentions-modern
Gathering detailed insights and metrics for rc-mentions-modern
Installations
npm install rc-mentions-modernDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
22.3.0
NPM Version
10.8.1
Releases
73
@rc-component/mentions@1.3.0
@rc-component/mentions@1.3.0
Updated on Jun 10, 2025
v2.20.0
v2.20.0
Updated on Apr 11, 2025
@rc-component/mentions@1.2.0
@rc-component/mentions@1.2.0
Updated on Apr 03, 2025
@rc-component/mentions@1.1.5
@rc-component/mentions@1.1.5
Updated on Mar 03, 2025
@rc-component/mentions@1.1.4
@rc-component/mentions@1.1.4
Updated on Feb 28, 2025
@rc-component/mentions@1.1.3
@rc-component/mentions@1.1.3
Updated on Feb 26, 2025
Languages
4
TypeScript
Less
JavaScript
Shell
TypeScript (95.41%)
Less (2.97%)
JavaScript (1.49%)
Shell (0.12%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
99 Stars
233 Commits
57 Forks
5 Watchers
9 Branches
46 Contributors
Updated on Jul 14, 2025
Maintainers
1
Package Meta Information
Latest Version
2.14.0
Package Id
rc-mentions-modern@2.14.0
Unpacked Size
61.71 kB
Size
11.59 kB
File Count
35
NPM Version
10.8.1
Node Version
22.3.0
Published on
Jul 07, 2024
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
rc-mentions
Screenshots
Feature
- support ie9,ie9+,chrome,firefox,safari
Keyboard
- Open mentions (focus input || focus and click)
- KeyDown/KeyUp/Enter to navigate menu
install
Usage
basic use
1/** 2 * inline: true 3 */ 4import Mentions from 'rc-mentions'; 5 6const { Option } = Mentions; 7 8var Demo = ( 9 <Mentions> 10 <Option value="light">Light</Option> 11 <Option value="bamboo">Bamboo</Option> 12 <Option value="cat">Cat</Option> 13 </Mentions> 14); 15React.render(<Demo />, container);
API
Mentions props
| name | description | type | default |
|---|---|---|---|
| autoFocus | Auto get focus when component mounted | boolean | false |
| defaultValue | Default value | string | - |
| filterOption | Customize filter option logic | false | (input: string, option: OptionProps) => boolean | - |
| notFoundContent | Set mentions content when not match | ReactNode | 'Not Found' |
| placement | Set popup placement | 'top' | 'bottom' | 'bottom' |
| direction | Set popup direction | 'ltr' | 'rtl' | 'ltr' |
| prefix | Set trigger prefix keyword | string | string[] | '@' |
| rows | Set row count | number | 1 |
| split | Set split string before and after selected mention | string | ' ' |
| silent | Used in transition phase, does not respond to keyboard enter events when equal to true | boolean | false |
| validateSearch | Customize trigger search logic | (text: string, props: MentionsProps) => void | - |
| value | Set value of mentions | string | - |
| onChange | Trigger when value changed | (text: string) => void | - |
| onKeyDown | Trigger when user hits a key | React.KeyboardEventHandler<HTMLTextAreaElement> | - |
| onKeyUp | Trigger when user releases a key | React.KeyboardEventHandler<HTMLTextAreaElement> | - |
| onSelect | Trigger when user select the option | (option: OptionProps, prefix: string) => void | - |
| onSearch | Trigger when prefix hit | (text: string, prefix: string) => void | - |
| onFocus | Trigger when mentions get focus | React.FocusEventHandler<HTMLTextAreaElement> | - |
| onBlur | Trigger when mentions lose focus | React.FocusEventHandler<HTMLTextAreaElement> | - |
| getPopupContainer | DOM Container for suggestions | () => HTMLElement | - |
| autoSize | Textarea height autosize feature, can be set to true|false or an object { minRows: 2, maxRows: 6 } | boolean | object | - |
| onPressEnter | The callback function that is triggered when Enter key is pressed | function(e) | - |
| onResize | The callback function that is triggered when textarea resize | function({ width, height }) | - |
Methods
| name | description |
|---|---|
| focus() | Component get focus |
| blur() | Component lose focus |
Development
npm install
npm start
Example
online example: http://react-component.github.io/mentions/
Test Case
npm test
Coverage
npm run coverage
License
rc-mentions is released under the MIT license.
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE.md:0
- Info: FSF or OSI recognized license: MIT License: LICENSE.md:0
Reason
0 existing vulnerabilities detected
Reason
Found 10/29 approved changesets -- score normalized to 3
Reason
3 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 2
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/main.yml:1
- Info: no jobLevel write permissions found
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/main.yml:5: update your workflow using https://app.stepsecurity.io/secureworkflow/react-component/mentions/main.yml/master?enable=pin
- Info: 0 out of 1 third-party GitHubAction dependencies pinned
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 16 are checked with a SAST tool
Score
3.9
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More