Tuesday, 4 December, 2018 UTC


Summary

React-TagEditor
A tag editor coded in ES6, with React.js as its dependency. Inspired by StackOverflow's tag editor.
Features
  • Basic editing/removing
  • Navigating through tags via left/right on keyboard
  • Tag can be modified after being created
  • Tag can be split at the cursor point.
View Demo validation and error handler
Install
bower:
bower install react-tageditor --save
<link rel="stylesheet" href="./bower_components/react-tageditor/dist/style/default.css">

<script src="./bower_components/react/react.js"></script>
<script src="./bower_components/react-tageditor/dist/index.js"></script>
npm:
npm install react-tageditor --save
API

Attributes

<TagEditor tags={[]} delimiters={[]} placeholder="" />
All attributes are optional.
  • tags: An array of tags.
  • delimiters: An array of delimiters for splitting tags. Element in array could be string or number(keyCode).
  • placeholder
  • validation(currentTag, allTags): A function for validating. Throw an error when tag/tags do not meet your requirement. Error will be passed to onError.
  • onChange(tagsChanged, allTags, action): Callback triggered after tags added or removed.action will be add or remove.
  • onError(error): Callback triggered on error. Access more information about the error via error.name & error.message.

Methods

  • add(tagText)
  • remove(tagText)
  • output(): returns an array of tag text
Styling
$tagColor: #aaa !default;
$tagColorActive: #555 !default;
$tagBgColor: #ebebeb !default;
$tagFontSize: 1rem !default;

$editorBorder: #ccc !default;
$editorBorderActive: #808080 !default;

$placeholderColor: #777 !default;

$pink: #f2c9c9 !default;
$crimson: #5c0909 !default;
Development
  1. gem install sass
  2. npm install
    This will install react, webpack, babel-loader and other dependencies.
  3. bower install
    This will install react, neutron for building examples.
  4. npm run build
    Compile our js/scss files to dist/
GitHub