Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jfusco/react-tagging-input
Simple, stateless, React tagging component
https://github.com/jfusco/react-tagging-input
flow flowtype jest jest-tests react react-tags
Last synced: 3 months ago
JSON representation
Simple, stateless, React tagging component
- Host: GitHub
- URL: https://github.com/jfusco/react-tagging-input
- Owner: JFusco
- License: mit
- Created: 2016-07-16T13:14:34.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-10-11T13:26:58.000Z (over 7 years ago)
- Last Synced: 2024-11-09T16:47:18.169Z (3 months ago)
- Topics: flow, flowtype, jest, jest-tests, react, react-tags
- Language: JavaScript
- Homepage: https://jfusco.github.io/react-tagging-input
- Size: 2.83 MB
- Stars: 5
- Watchers: 0
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-tagging-input
[![Build Status][build-image]][build-url]
[![peerDependency Status][peer-dep-image]][peer-dep-url]
[![devDependency Status][dev-dep-image]][dev-dep-url]
[![MIT][mit-image]][mit-url]
[![npm][npm-version-image]][npm-url]
> Simple tagging component.
## Demo ##
https://jfusco.github.io/react-tagging-input
## Getting Started ##
#### Installation
From the root of your project.
```sh
npm install react-tagging-input --save
```
## Usage
Simple implementation of tags. See [options available](#options) below.
```js
import React, { Component } from 'react';
import { render } from 'react-dom';
import Tags from 'react-tagging-input';
class Application extends Component{
state = {
tags: ['foo', 'bar']
};
constructor(props){
super(props);
}
onTagAdded(tag) {
this.setState({
tags: [...this.state.tags, tag]
});
}
onTagRemoved(tag, index) {
this.setState({
tags: this.state.tags.filter((tag, i) => i !== index)
});
}
render(){
return (
);
}
}
render(, document.getElementById('application'));
```
#### Options
* **[`tags`](#tags)**
* **[`placeholder`](#placeholder)**
* **[`addKeys`](#addKeys)**
* **[`onAdded`](#onAdded)**
* **[`onRemoved`](#onRemoved)**
* **[`maxTags`](#maxTags)**
* **[`readOnly`](#readOnly)**
* **[`removeTagIcon`](#removeTagIcon)**
* **[`uniqueTags`](#uniqueTags)**
* **[`id`](#id)**
##### tags ~ required
An `array` of tags to be passed in and rendered right away in the component
```js
state = {
tags: ['foo', 'bar']
};
```
##### placeholder ~ optional ~ default `null`
A `string` used as placeholder text in the tags input field
```js
```
##### addKeys ~ optional ~ default `[13, 9, 32]`
An `array` of keyCodes used to tell the tags component which delimiter to use to add a tag
[Here](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode) is more info and a list of keyCodes
```js
```
##### onAdded ~ optional
A `function` fired when a new tag is added - returns a `string` of the new tag
```js
onTagAdded(tag){
console.log(`new tag: ${tags}`);
}
```
##### onRemoved ~ optional
A `function` fired when a new tag is deleted - returns a `string` of the tag that was deleted
```js
onTagRemoved(tag, index){
console.log(`deleted tag: ${tag} at index ${index}`);
}
```
##### maxTags ~ optional ~ default `-1` (infinite)
An `integer` representing the maximum number of tags that are allowed to be added
```js
```
##### readOnly ~ optional ~ default `false`
A `boolean` that sets the tag component to read only mode. No adding or removing tags and pointer events
```js
```
##### removeTagIcon ~ optional ~ default `"x"`
The `element` to be used for the delete icon
```js
const removeIcon = () => {
return (
);
}
```
##### uniqueTags ~ optional ~ default `false`
A `boolean` that allows the same tag to be added more than once
```js
//-- Only allow unique tags to be added
```
##### id ~ optional ~ default `null`
The `string` to be used for the ID of the component
```js
```
## Styling
#### Installation
Import the main SCSS file in to your application SCSS files
```scss
@import "node_modules/react-tagging-input/src/component/scss/styles.scss";
```
There are a few variables set to `!default` that can be overriden. If you need to change it more just override the actual styles.
**Any overriden variables needs to go above the `@import` statement to take effect**
```scss
//-- Global UI
$tag-base-height
$tag-base-font-size
$tag-base-border-radius
$tag-base-font-color
$tag-base-margin
$tag-base-font-family
//-- Tags
$tag-background-color
$tag-background-hover-color
$tag-remove-color
$tag-remove-font-size
$tag-remove-hover-color
//-- Input
$tag-input-bg-color
$tag-input-border
$tag-input-placeholder-color
```
If you don't care to override variables and just want to override actual styles you may choose to import the compiled version of the css instead
```scss
@import "node_modules/react-tagging-input/dist/styles.css";
```
## Tests ##
```
npm test
```
[build-image]: https://travis-ci.org/JFusco/react-tagging-input.svg?branch=master
[build-url]: https://travis-ci.org/JFusco/react-tagging-input
[mit-image]: https://img.shields.io/npm/l/react-tagging-input.svg?style=flat-square
[mit-url]: https://github.com/JFusco/react-tagging-input/blob/master/LICENSE
[npm-version-image]: https://img.shields.io/npm/v/npm.svg?maxAge=2592000
[npm-url]: https://www.npmjs.com/package/react-tagging-input
[dev-dep-image]: https://david-dm.org/JFusco/react-tagging-input/dev-status.svg
[dev-dep-url]: https://david-dm.org/JFusco/react-tagging-input?type=dev
[peer-dep-image]: https://david-dm.org/JFusco/react-tagging-input/peer-status.svg
[peer-dep-url]: https://david-dm.org/JFusco/react-tagging-input?type=peer