React Tagging Libraries Comparison
react-tagsinput vs react-tag-autocomplete vs react-tag-input
Search packages..
1 Year
react-tagsinputreact-tag-autocompletereact-tag-inputSimilar Packages:
What's React Tagging Libraries?

React tagging libraries provide developers with tools to create tag input fields that allow users to add and manage multiple tags easily. These libraries enhance user experience by offering features like autocomplete suggestions, customizable styling, and event handling for tag management. They are particularly useful in applications where users need to input multiple items, such as in forms for selecting categories, keywords, or interests. Each library has its unique approach to handling tags, making it essential to choose the right one based on project requirements.

NPM Package Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
react-tagsinput69,8691,35328.7 kB182 years agoMIT
react-tag-autocomplete33,697189381 kB624 days agoISC
react-tag-input31,2801,519308 kB1055 months agoMIT
Feature Comparison: react-tagsinput vs react-tag-autocomplete vs react-tag-input

Autocomplete Functionality

  • react-tagsinput:

    react-tagsinput lacks advanced autocomplete features, focusing instead on basic tag input. Users will need to manually enter tags without suggestions, making it less efficient for large datasets.

  • react-tag-autocomplete:

    react-tag-autocomplete provides a powerful autocomplete feature that suggests tags as users type, making it easier for them to find and select relevant tags quickly. This feature can significantly enhance user experience, especially in applications with a large set of possible tags.

  • react-tag-input:

    react-tag-input does not include built-in autocomplete functionality, but it allows developers to implement custom suggestions through its flexible API. This gives developers the freedom to create tailored experiences, although it requires more effort to set up.

Customization and Styling

  • react-tagsinput:

    react-tagsinput provides basic styling options but is less flexible compared to the other two libraries. While it allows for some customization, developers may find it limiting if they require extensive design changes.

  • react-tag-autocomplete:

    react-tag-autocomplete offers a high degree of customization, allowing developers to style the tag input field and the dropdown suggestions to match their application's design. This flexibility is beneficial for maintaining brand consistency across the UI.

  • react-tag-input:

    react-tag-input is highly customizable, enabling developers to modify the appearance and behavior of tags and the input field. It supports custom renderers for tags, making it easy to implement unique designs and interactions.

Ease of Use

  • react-tagsinput:

    react-tagsinput is the simplest of the three, focusing on basic functionality. Its minimalistic approach makes it easy to use, but it may not meet the needs of users looking for more advanced features.

  • react-tag-autocomplete:

    react-tag-autocomplete is designed for ease of use, with a straightforward API that allows developers to integrate it quickly into their applications. The autocomplete feature is intuitive, making it user-friendly for end-users as well.

  • react-tag-input:

    react-tag-input is also user-friendly, with a simple API that makes it easy to implement. However, the lack of built-in autocomplete may require additional work to enhance user experience.

Performance

  • react-tagsinput:

    react-tagsinput is lightweight and performs well in simple scenarios. However, it may struggle with performance in applications requiring extensive tag management due to its lack of advanced features.

  • react-tag-autocomplete:

    react-tag-autocomplete is optimized for performance, especially when handling large datasets for autocomplete suggestions. It efficiently manages rendering and updates, ensuring smooth user interactions even with many tags.

  • react-tag-input:

    react-tag-input performs well for moderate use cases but may require optimization for handling a large number of tags or complex interactions. Developers should monitor performance in larger applications.

Community and Support

  • react-tagsinput:

    react-tagsinput has a smaller community and less frequent updates, which may lead to challenges in finding support or resources. Developers should consider this when choosing a library for long-term projects.

  • react-tag-autocomplete:

    react-tag-autocomplete has a growing community and is actively maintained, providing good support through documentation and community contributions. This can be beneficial for developers seeking help or looking to extend functionality.

  • react-tag-input:

    react-tag-input has a decent community, with sufficient documentation and examples available. However, it may not be as actively maintained as some other libraries, which could impact long-term support.

How to Choose: react-tagsinput vs react-tag-autocomplete vs react-tag-input
  • react-tagsinput:

    Select react-tagsinput if you are looking for a lightweight and easy-to-use tagging library that supports basic tag input functionality. It is great for projects that need a minimalistic approach to tag management without additional overhead.

  • react-tag-autocomplete:

    Choose react-tag-autocomplete if you need a robust tagging solution with built-in autocomplete functionality. It is ideal for applications where users benefit from suggestions as they type, enhancing the speed and accuracy of tag input.

  • react-tag-input:

    Opt for react-tag-input if you require a simple and flexible tagging component that allows for easy customization and styling. It is suitable for projects where you want to implement a straightforward tagging system without complex features.

Similar Npm Packages to react-tagsinput

react-tagsinput is a flexible and customizable React component for managing tags or keywords. It allows users to input multiple tags, making it ideal for applications that require tagging functionality, such as blog posts, user profiles, or product listings. With its straightforward API and customizable styles, react-tagsinput provides an easy way to enhance user experience when dealing with tag inputs. However, there are several alternatives available that also offer tag input features. Here are a few noteworthy options:

  • react-tag-autocomplete is a powerful and user-friendly tag input component for React. It provides an autocomplete feature, allowing users to easily select tags from a predefined list while typing. This can significantly improve the user experience by reducing input errors and speeding up the tagging process. If your application requires a more guided tagging experience with suggestions, react-tag-autocomplete is an excellent choice.
  • react-tag-input is another popular library for managing tag inputs in React applications. It offers a simple and clean interface for adding and removing tags. With features like customizable styles and keyboard navigation, react-tag-input is suitable for applications that need a straightforward tagging solution without the complexity of autocomplete. This library is particularly useful for developers looking for a lightweight option that still provides essential tagging functionality.
  • react-tag-input (note: this is the same library as mentioned above, but it may refer to different versions or forks) is designed to provide a user-friendly interface for managing tags. It emphasizes simplicity and ease of use, making it a great choice for developers who want to implement tagging without unnecessary overhead.

For a comprehensive comparison of these libraries, check out the following link: Comparing react-tag-autocomplete vs react-tag-input vs react-tagsinput.

Similar Npm Packages to react-tag-autocomplete

react-tag-autocomplete is a flexible and customizable React component designed for creating tag input fields. It allows users to select multiple options from a predefined list, making it ideal for scenarios where users need to input tags, categories, or keywords. The component supports keyboard navigation, custom rendering, and various styling options, providing a user-friendly experience for managing tags in forms.

While react-tag-autocomplete is a powerful solution for tag input fields, there are alternatives available in the React ecosystem. One notable alternative is:

  • react-select, a highly customizable and versatile select input component for React. It supports single and multi-select options, making it suitable for a wide range of use cases, including dropdowns and tag inputs. With features like async loading, search functionality, and customizable styles, react-select is a robust choice for developers looking to implement a flexible selection component in their applications. Its extensive API and community support make it a popular option for managing selections in forms.

To see how react-tag-autocomplete compares with react-select, check out the comparison: Comparing react-select vs react-tag-autocomplete.

Similar Npm Packages to react-tag-input

react-tag-input is a flexible and customizable component for creating tag input fields in React applications. It allows users to add, remove, and manage tags easily, making it ideal for scenarios where users need to input multiple values, such as in forms for selecting skills, interests, or categories. The component is designed to be user-friendly and can be styled to fit the look and feel of any application.

While react-tag-input offers a robust solution for tag management, there are other libraries that provide similar functionality. Here are a few alternatives:

  • react-tag-autocomplete is a simple and lightweight library that provides an autocomplete feature for tag input fields. It allows users to select from a list of predefined options while entering tags, enhancing the user experience by reducing input errors and improving efficiency. If your application requires an autocomplete feature alongside tag management, react-tag-autocomplete is a great choice.
  • react-tagsinput is another popular library for creating tag input fields in React. It offers a straightforward API and supports features like adding and removing tags, as well as custom styling. While it may not have all the advanced features of react-tag-input, it is easy to use and can be a good fit for simpler applications that require basic tag input functionality.

To see how react-tag-input compares with react-tag-autocomplete and react-tagsinput, check out the comparison: Comparing react-tag-autocomplete vs react-tag-input vs react-tagsinput.

README for react-tagsinput

react-tagsinput

NPM version Size Code coverage Download count js-standard-style

Highly customizable React component for inputing tags.

Demo

Example

import React from 'react'
import TagsInput from 'react-tagsinput'

import 'react-tagsinput/react-tagsinput.css'

class Example extends React.Component {
  constructor() {
    super()
    this.state = {tags: []}
  }

  handleChange = (tags) => {
    this.setState({tags})
  }

  render() {
    return <TagsInput value={this.state.tags} onChange={this.handleChange} />
  }
}

Table of Contents

Styling

Look at react-tagsinput.css for a basic style.

Component Interface

Props

value (required)

An array of tags.

onChange (required)

Callback when tags change, gets three arguments tags which is the new tag array, changed which is an array of the tags that have changed and changedIndexes which is an array of the indexes that have changed.

onChangeInput

Callback from the input box, gets one argument value which is the content of the input box. (onChangeInput is only called if the input box is controlled, for this to happen both inputValue and onChangeInput need to be set)

addKeys

An array of keys or key codes that add a tag, default is [9, 13] (Tab and Enter).

currentValue

A string to set a value on the input.

inputValue

Similar to currentValue but needed for controlling the input box. (inputValue is only useful if you use it together with onChangeInput)

onlyUnique

Allow only unique tags, default is false.

validate

Allow only tags that pass this validation function. Gets one argument tag which is the tag to validate. Default is () => true.

validationRegex

Allow only tags that pass this regex to be added. Default is /.*/.

onValidationReject

Callback when tags are rejected through validationRegex, passing array of tags as the argument.

disabled

Passes the disabled prop to renderInput and renderTag, by default this will "disable" the component.

maxTags

Allow limit number of tags, default is -1 for infinite.

addOnBlur

Add a tag if input blurs. Default false.

addOnPaste

Add a tags if HTML5 paste on input. Default false.

pasteSplit

Function that splits pasted text. Default is:

function defaultPasteSplit (data) {
  return data.split(' ').map(d => d.trim())
}
removeKeys

An array of key codes that remove a tag, default is [8] (Backspace).

className

Specify the wrapper className. Default is react-tagsinput.

focusedClassName

Specify the class to add to the wrapper when the component is focused. Default is react-tagsinput--focused.

tagProps

Props passed down to every tag component. Default is:

{
  className: 'react-tagsinput-tag',
  classNameRemove: 'react-tagsinput-remove'
}
inputProps

Props passed down to input. Default is:

{
  className: 'react-tagsinput-input',
  placeholder: 'Add a tag'
}
tagDisplayProp

The tags' property to be used when displaying/adding one. Default is: null which causes the tags to be an array of strings.

renderTag

Render function for every tag. Default is:

function defaultRenderTag (props) {
  let {tag, key, disabled, onRemove, classNameRemove, getTagDisplayValue, ...other} = props
  return (
    <span key={key} {...other}>
      {getTagDisplayValue(tag)}
      {!disabled &&
        <a className={classNameRemove} onClick={(e) => onRemove(key)} />
      }
    </span>
  )
}
renderInput

Render function for input. Default is:

function defaultRenderInput (props) {
  let {onChange, value, addTag, ...other} = props
  return (
    <input type='text' onChange={onChange} value={value} {...other} />
  )
}

Note: renderInput also receives addTag as a prop.

renderLayout

Renders the layout of the component. Takes tagElements and inputElement as args. Default is:

function defaultRenderLayout (tagElements, inputElement) {
  return (
    <span>
      {tagElements}
      {inputElement}
    </span>
  )
}
preventSubmit

A boolean to prevent the default submit event when adding an 'empty' tag. Default: true

Set to false if you want the default submit to fire when pressing enter again after adding a tag.

Methods

focus()

Focus on input element.

blur()

Blur input element.

accept()

Try to add whatever value is currently in input element.

addTag(tag)

Convenience method that adds a tag.

clearInput()

Clears the input value.

Contributors

Changelog

License

MIT Licensed

Terms & PrivacyProduct HuntJSON to TypeScriptCopilotChat for Web Dev