• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

mentions: React Mentions

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

mentions

开源软件地址:

https://gitee.com/mirrors_react-component/mentions

开源软件介绍:

rc-mentions


React Mentions

NPM versionbuild statusTest coverageDependenciesDevDependenciesnpm downloadStorybook

Screenshots

Feature

  • support ie9,ie9+,chrome,firefox,safari

Keyboard

  • Open mentions (focus input || focus and click)
  • KeyDown/KeyUp/Enter to navigate menu

install

rc-mentions

Usage

basic use

import Mentions from 'rc-mentions';const { Option } = Mentions;var Demo = (  <Mentions>    <Option value="light">Light</Option>    <Option value="bamboo">Bamboo</Option>    <Option value="cat">Cat</Option>  </Mentions>);React.render(<Demo />, container);

API

Mentions props

namedescriptiontypedefault
autoFocusAuto get focus when component mountedbooleanfalse
defaultValueDefault valuestring-
filterOptionCustomize filter option logicfalse | (input: string, option: OptionProps) => boolean-
notFoundContentSet mentions content when not matchReactNode'Not Found'
placementSet popup placement'top' | 'bottom''bottom'
directionSet popup direction'ltr' | 'rtl''ltr'
prefixSet trigger prefix keywordstring | string[]'@'
rowsSet row countnumber1
splitSet split string before and after selected mentionstring' '
validateSearchCustomize trigger search logic(text: string, props: MentionsProps) => void-
valueSet value of mentionsstring-
onChangeTrigger when value changed(text: string) => void-
onKeyDownTrigger when user hits a keyReact.KeyboardEventHandler-
onKeyUpTrigger when user releases a keyReact.KeyboardEventHandler-
onSelectTrigger when user select the option(option: OptionProps, prefix: string) => void-
onSearchTrigger when prefix hit(text: string, prefix: string) => void-
onFocusTrigger when mentions get focusReact.FocusEventHandler-
onBlurTrigger when mentions lose focusReact.FocusEventHandler-
getPopupContainerDOM Container for suggestions() => HTMLElement-
autoSizeTextarea height autosize feature, can be set to true|false or an object { minRows: 2, maxRows: 6 }boolean | object-
onPressEnterThe callback function that is triggered when Enter key is pressedfunction(e)-
onResizeThe callback function that is triggered when textarea resizefunction({ width, height })-

Methods

namedescription
focus()Component get focus
blur()Component lose focus

Development

npm installnpm start

Example

http://localhost:9001/

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.


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
css-arrow-generator: CSS arrow generator online发布时间:2022-02-14
下一篇:
html-color-cheatsheet: HTML color cheatsheet发布时间:2022-02-14
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap