Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
cfg
 
 
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

react-taggable-input npm package Travis codecov

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.

react-taggable-input

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,

trigger

which character would be trigger. e.g, '##'. it will only trigger one character.

defaultValue

defaultValue is a html string. if you want to set the initial value for it.

placeHolder

placeHolder is text only. It provides placeHolder function like <input /> element.

onTrigger

onTrigger will return a triggered value. it will return null if there is no trigger.

e.g,

  • # -> ''
  • #123 -> '123'
  • 123 -> null

onTriggerKeyUp

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.

react-taggable-input-onTriggerKeyUp

onChange

onChange will return the value when user change the value.

onSubmit

onSubmit will be fired if user is not in trigger mode and click Enter. This behavior is similar to the original input element.

More Detail

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.

About

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

Resources

License

Packages

No packages published