rc-mentions

    1.6.1 • Public • Published

    rc-mentions


    React Mentions

    NPM version build status Test coverage Dependencies DevDependencies npm download Storybook

    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

    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 ' '
    validateSearch Customize trigger search logic (text: string, props: MentionsProps) => void -
    value Set value of mentions string -
    onChange Trigger when value changed (text: string) => void -
    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 -
    onBlur Trigger when mentions lose focus React.FocusEventHandler -
    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

    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.

    Install

    npm i rc-mentions

    DownloadsWeekly Downloads

    447,632

    Version

    1.6.1

    License

    MIT

    Unpacked Size

    70.1 kB

    Total Files

    32

    Last publish

    Collaborators

    • avatar
    • avatar