npm:react-tag-content

README

React Tag Content

This Fork of the React Tag Autocomplete project adds a new prop renderTagContent to the ReactTags component. This allows to render whatever you want inside the added tags. See the example for more information.

React Tag Autocomplete

React Tag Autocomplete is a simple tagging component ready to drop in your React projects. This is a fork of the original React Tags project by Prakhar Srivastav. This version cleans out a few options, removes the drag-and-drop re-ordering functionality and adds appropriate roles and ARIA states.

Installation

npm install --save react-tag-content

Usage

Here's a sample implementation that initializes the component with a list of initial tags and suggestions list. Apart from this, there are multiple events, handlers for which need to be set. 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 (
            <div>
                <ReactTags
                    tags={this.state.tags}
                    suggestions={this.state.suggestions}
                    handleDelete={this.handleDelete}
                    handleAddition={this.handleAddition} />
            </div>
        )
    }
});

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

renderTagContent (optional)

A function that returns a react component to be rendered inside an added tag. the function gets called with tag and index.

const renderTagContent = (tag, index) => <div>{`This is custom content of the tag ${tag.name}`}</div>

If you return null instead of a react component, the default tags are used (as if you hadn't supplied the prop)

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 }
];

busy (optional)

A boolean flag used to display the busy indicator or not. Useful when loading new suggestions asynchronously. Default: false.

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.

minQueryLength (optional)

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

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 });

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

Styling

<ReactTags> does not come up with any styles. However, it is very easy to customize the look of the component the way you want it. The component provides the following classes with which you can style:-

ReactTags
ReactTags__tagInput
ReactTags__busy
ReactTags__selected
ReactTags__tag -- ReactTags__tag_simple -- ReactTags__tag_content -- ReactTags__tag_content_close
ReactTags__remove
ReactTags__suggestions

An example can be found in /example/styles.css.

Dev

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:

Thanks

The autocomplete dropdown is inspired by Lea Verou's awesomeplete library.

Usage no npm install needed!