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

React tag input libraries provide developers with the ability to implement tagging functionality in their applications, allowing users to create, edit, and delete tags easily. These libraries enhance user experience by simplifying the process of managing multiple inputs, especially in forms where categorization or labeling is required. They often come with features like autocomplete suggestions, customizable styles, and event handling, making them versatile tools for form management in React applications.

Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
react-tagsinput71,8331,35428.7 kB182 years agoMIT
react-tag-autocomplete35,269196405 kB7a month agoISC
react-tag-input31,3911,525449 kB10511 days agoMIT
Feature Comparison: react-tagsinput vs react-tag-autocomplete vs react-tag-input

Autocomplete Functionality

  • react-tagsinput:

    react-tagsinput offers limited autocomplete capabilities, primarily focusing on tag management. It allows users to enter tags freely without suggestions, making it more flexible but less guided than react-tag-autocomplete.

  • react-tag-autocomplete:

    react-tag-autocomplete provides a powerful autocomplete feature that suggests tags based on user input, enhancing usability and speeding up the tagging process. It allows for dynamic suggestions from a predefined list, making it easier for users to find and select relevant tags.

  • react-tag-input:

    react-tag-input does not include built-in autocomplete functionality, focusing instead on a straightforward tagging experience. Users can manually enter tags without suggestions, which may be suitable for simpler applications where predefined tags are not necessary.

Customization

  • react-tagsinput:

    react-tagsinput provides a good level of customization, allowing developers to style the component and control its behavior. It supports custom rendering of tags, making it adaptable to various design requirements.

  • react-tag-autocomplete:

    react-tag-autocomplete allows for extensive customization options, enabling developers to modify styles, behaviors, and the appearance of the dropdown suggestions. This flexibility makes it suitable for applications that require a unique look and feel.

  • react-tag-input:

    react-tag-input is designed for simplicity and offers basic customization options. It allows for some styling adjustments but may not provide the depth of customization found in more complex libraries.

Performance

  • react-tagsinput:

    react-tagsinput is also lightweight, but its performance can vary depending on the complexity of the tags being managed. It is generally suitable for moderate use cases.

  • react-tag-autocomplete:

    react-tag-autocomplete is optimized for performance, especially when dealing with large datasets for tag suggestions. It efficiently manages rendering and updates, ensuring a smooth user experience even with extensive tag lists.

  • react-tag-input:

    react-tag-input is lightweight and performs well in scenarios with fewer tags. However, it may not be as efficient in handling large datasets compared to more advanced libraries.

User Experience

  • react-tagsinput:

    react-tagsinput offers a decent user experience with its flexible input handling. Users can freely enter tags, but the absence of autocomplete may lead to a less guided experience compared to react-tag-autocomplete.

  • react-tag-autocomplete:

    react-tag-autocomplete enhances user experience significantly through its intuitive autocomplete suggestions and clear visual feedback. It helps users quickly find and select tags, reducing input errors and improving satisfaction.

  • react-tag-input:

    react-tag-input provides a straightforward user experience, allowing users to add and remove tags easily. However, it lacks advanced features that could further enhance usability, such as suggestions or validation.

Community and Support

  • react-tagsinput:

    react-tagsinput has a moderate level of community support, but it may not be as actively maintained as react-tag-autocomplete, which could affect its longevity in projects.

  • react-tag-autocomplete:

    react-tag-autocomplete has a strong community and is actively maintained, providing users with ongoing support and updates. This can be crucial for long-term projects that require reliable libraries.

  • react-tag-input:

    react-tag-input has a smaller community and may not receive frequent updates, which could be a consideration for developers looking for long-term support.

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

    Select react-tagsinput if you require a flexible tagging component that supports custom styling and can handle various input types. This package is beneficial for applications that need more control over the appearance and behavior of the tag input.

  • react-tag-autocomplete:

    Choose react-tag-autocomplete if you need a robust tagging solution with autocomplete functionality that enhances user experience by suggesting tags as users type. This package is ideal for applications where users need to select from a predefined list of tags or categories.

  • react-tag-input:

    Opt for react-tag-input if you want a simple and lightweight solution that allows users to add and remove tags easily without additional features. This library is suitable for projects where basic tagging functionality is sufficient and performance is a priority.

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

npm-compare.com is an independent website designed to help developers choose the most suitable npm packages. We are not affiliated with npm, Inc or npmjs.com, the official website for the npm registry. Please note that npm is a registered trademark of npm, Inc. For more details, please refer to our Terms & Privacy.