react-taggable-input

tag or mention in input element when keydown # or @ or any other character.

Install

npm i react-taggable-input

Usage

        <TaggableInput
          ref={ (input) => (this.input = input) }
          disabled={ this.props.disabled }
          defaultValue={ defaultValue }
          className="submit-input"
          placeHolder="輸入 #"
          trigger="#＃"
          maxLength={ 100 }
          onKeyDown={ this.handleKeyDown }
          onTrigger={ this.handleTrigger }
          onTriggerKeyUp={ this.handleTriggerKeyUp }
          onChange={ this.handleChange }
          onSubmit={ this.handleSubmit }
        />

props

trigger: PropTypes.string.isRequired,
disabled: PropTypes.bool,
className: PropTypes.string,
defaultValue: PropTypes.string,
placeHolder: PropTypes.string,
maxLength: PropTypes.number,
onKeyDown: PropTypes.func,
onTrigger: PropTypes.func,
onTriggerKeyUp: PropTypes.func,
onChange: PropTypes.func,
onSubmit: PropTypes.func,

More Detail

please checkout Demo.js if you want to see more detail.