tag or mention in input element when keydown # or @ or any other character. This component is a div with conteneditable so you can apply any style on it if you want. It is also possible to paste html directly.
npm i react-taggable-input
<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 }
/>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,
which character would be trigger. e.g, '#＃'. it will only trigger one character.
defaultValue is a html string. if you want to set the initial value for it.
placeHolder is text only. It provides placeHolder function like <input /> element.
onTrigger will return a triggered value. it will return null if there is no trigger.
e.g,
#->''#123->'123'123->null
onTriggerKeyUp will return the caret position of trigger. If you need to hint user how to use this trigger, it is very useful. here is an example.
onChange will return the value when user change the value.
onSubmit will be fired if user is not in trigger mode and click Enter. This behavior is similar to the original input element.
please checkout Demo.js if you want to see more detail.
Note: Demo.js is the example to demonstrate how to use react-taggable-input. I make it simple in the behavior after triggered callback.