react-tag-autocomplete

React Tag Autocomplete

React Tag Autocomplete is a simple tagging component ready to drop in your React projects. Originally based on the React Tags project by Prakhar Srivastav this version removes the drag-and-drop re-ordering functionality, adds appropriate roles and ARIA states and introduces a resizing text input.

Installation

The preferred way of using the component is via NPM

npm install --save react-tag-autocomplete

Usage

Here's a sample implementation that initializes the component with a list of preselected tags and a suggestions list. For more details, go through the API.

var ReactTags = require('react-tag-autocomplete');

var App = React.createClass({
    getInitialState: function() {
        return {
            tags: [
                { id: 1, name: "Apples" },
                { id: 2, name: "Pears" }
            ],
            suggestions: [
                { id: 3, name: "Bananas" },
                { id: 4, name: "Mangos" },
                { id: 5, name: "Lemons" },
                { id: 6, name: "Apricots" }
            ]
        }
    },
    handleDelete: function(i) {
        var tags = this.state.tags;
        tags.splice(i, 1);
        this.setState({ tags: tags });
    },
    handleAddition: function(tag) {
        var tags = this.state.tags;
        tags.push({
            id: tags.length + 1,
            name: tag
        });
        this.setState({ tags: tags });
    },
    render: function() {
        return (
            <ReactTags
                tags={this.state.tags}
                suggestions={this.state.suggestions}
                handleDelete={this.handleDelete}
                handleAddition={this.handleAddition} />
        )
    }
});

React.render(<App />, document.getElementById('app'));

Options

• tags
• suggestions
• delimiters
• placeholder
• autofocus
• autoresize
• minQueryLength
• maxSuggestionsLength
• classNames
• handleAddition
• handleDelete
• handleInputChange

tags (optional)

An array of tags that are displayed as pre-selected. Each tag must have an id and a name property. Default: [].

var tags =  [
    { id: 1, name: "Apples" },
    { id: 2, name: "Pears" }
];

suggestions (optional)

An array of suggestions that are used as basis for showing suggestions. Each suggestion must have an id and a name property and an optional disabled property. Default: [].

var suggestions = [
    { id: 3, name: "Bananas" },
    { id: 4, name: "Mangos" },
    { id: 5, name: "Lemons" },
    { id: 6, name: "Apricots", disabled: true }
];

delimiters (optional)

An array of keycodes which should terminate tags input. Default: [13, 9].

placeholder (optional)

The placeholder string shown for the input. Default: 'Add new tag'.

autofocus (optional)

Boolean parameter to control whether the text-input should be autofocused on mount. Default: true.

autoresize (optional)

Boolean parameter to control whether the text-input should be automatically resized to fit its value. Default: true.

minQueryLength (optional)

How many characters are needed for suggestions to appear. Default: 2.

maxSuggestionsLength (optional)

Maximum number of suggestions to display. Default: 6.

classNames (optional)

Override the default class names. Defaults:

{
    root: 'ReactTags',
    tagInput: 'ReactTags__tagInput',
    selected: 'ReactTags__selected',
    tag: 'ReactTags__tag',
    tagName: 'ReactTags__tagName',
    suggestions: 'ReactTags__suggestions',
    isActive: 'is-active',
    isDisabled: 'is-disabled'
}

handleAddition (required)

Function called when the user wants to add a tag. Receives the tag.

function(tag) {
    // Add the tag { id, name } to the tag list
    tags.push(tag);
}

handleDelete (required)

Function called when the user wants to delete a tag. Receives the tag index.

function(i) {
    // Delete the tag at index i
    tags.splice(i, 1);
}

handleInputChange (optional)

Optional event handler when the input changes. Receives the current input value.

function(input) {
    if (this.state.busy) {
        return;
    } else {
        this.setState({ busy: true });

        return fetch(`query=${input}`).then(function(result) {
            this.setState({ busy: false });
        });
    }
}

Styling

It is possible to customize the look of the component the way you want it. An example can be found in /example/styles.css.

Development

The component is written in ES6 and uses Webpack as its build tool.

npm install
npm run dev # open http://localhost:8090

Contributing

Got ideas on how to make this better? Open an issue! I'm yet to add tests so keep your PRs on hold :grinning: