tag or mention in input element when keydown # or @ or any other character.
JavaScript CSS HTML
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
cfg
dist
images
javascripts
src
stylesheets
test
.babelrc
.editorconfig
.eslintrc
.gitignore
.npmignore
.travis.yml
LICENSE
README.md
codecov.yml
index.html
karma.conf.js
package.json
params.json
server.js
webpack.config.js
yarn.lock

README.md

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.