Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ndyag/react-tageditor
A StackOverflow style tag editor
https://github.com/ndyag/react-tageditor
react tageditor
Last synced: 9 days ago
JSON representation
A StackOverflow style tag editor
- Host: GitHub
- URL: https://github.com/ndyag/react-tageditor
- Owner: NdYAG
- Created: 2015-06-03T16:52:35.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2022-12-03T15:36:45.000Z (almost 2 years ago)
- Last Synced: 2024-10-13T01:49:00.057Z (24 days ago)
- Topics: react, tageditor
- Language: JavaScript
- Homepage: http://ndyag.github.io/react-tageditor/
- Size: 537 KB
- Stars: 28
- Watchers: 3
- Forks: 9
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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.
## Demo
* [basic](http://NdYAG.github.io/react-tageditor/)
* [validation and error handler](http://NdYAG.github.io/react-tageditor/validation.html)
## Install
bower:
```sh
bower install react-tageditor --save
```
```html
```
npm:
```sh
npm install react-tageditor --save
```
## API
### Attributes
```html
```
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
```scss
$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/`
## License
MIT.