A fantastically simple tagging component for your projects

Overview

React tags

MIT NPM Version npm downloads Build Statuscode style: prettier

React-tags is a simple tagging component ready to drop in your projects. The component is inspired by GMail's To field in the compose window.

Features

  • Autocomplete based on a suggestion list
  • Keyboard friendly and mouse support
  • Reorder tags using drag and drop
  • Edit tag support
  • Optional clear all button

Why

Started by Prakhar Srivastav and later maintained by Aakansha Doshi.

In Prakhar's words here is why he started it👇🏻

Because I was looking for an excuse to build a standalone component and publish it in the wild? To be honest, I needed a tagging component that provided the above features for my React-Surveyman project. Since I was unable to find one which met my requirements (and the fact that I generally enjoy re-inventing the wheel) this is what I came up with.

Demo

img

Check it out here

Support

If you like this library, you can support to help it improve:)

Buy Me A Coffee

Installation

You can use npm

npm install --save react-tag-input

or via Yarn

yarn add react-tag-input

make sure you have installed the peer dependencies as well with below versions

"react": "^17.0.2",
"react-dnd": "^14.0.2",
"react-dnd-html5-backend": "^14.0.0",
"react-dom": "17.0.2"

It is, however, also available to be used separately (dist/ReactTags.min.js). If you prefer this method remember to include ReactDND as a dependancy. Refer to the example to see how this works.

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.

import React, { useState } from 'react';
import { render } from 'react-dom';
import { COUNTRIES } from './countries';
import './style.css';
import { WithContext as ReactTags } from 'react-tag-input';

const suggestions = COUNTRIES.map(country => {
  return {
    id: country,
    text: country
  };
});

const KeyCodes = {
  comma: 188,
  enter: 13
};

const delimiters = [KeyCodes.comma, KeyCodes.enter];

const App = () => {
  const [tags, setTags] = React.useState([
    { id: 'Thailand', text: 'Thailand' },
    { id: 'India', text: 'India' },
    { id: 'Vietnam', text: 'Vietnam' },
    { id: 'Turkey', text: 'Turkey' }
  ]);

  const handleDelete = i => {
    setTags(tags.filter((tag, index) => index !== i));
  };

  const handleAddition = tag => {
    setTags([...tags, tag]);
  };

  const handleDrag = (tag, currPos, newPos) => {
    const newTags = tags.slice();

    newTags.splice(currPos, 1);
    newTags.splice(newPos, 0, tag);

    // re-render
    setTags(newTags);
  };

  const handleTagClick = index => {
    console.log('The tag at index ' + index + ' was clicked');
  };

  return (
    <div className="app">
      <h1> React Tags Example </h1>
      <div>
        <ReactTags
          tags={tags}
          suggestions={suggestions}
          delimiters={delimiters}
          handleDelete={handleDelete}
          handleAddition={handleAddition}
          handleDrag={handleDrag}
          handleTagClick={handleTagClick}
          inputFieldPosition="bottom"
          autocomplete
        />
      </div>
    </div>
  );
};

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

A note about Contexts One of the dependencies of this component is the react-dnd library. Since the 1.0 version, the original author has changed the API and requires the application using any draggable components to have a top-level backend context. So if you're using this component in an existing Application that uses React-DND you will already have a backend defined, in which case, you should require the component without the context.

const ReactTags = require('react-tag-input').WithOutContext;

Otherwise, you can simply import along with the backend itself (as shown above). If you have ideas to make this API better, I'd love to hear.

Options

Option Type Default Description
tags Array [] An array of tags that are displayed as pre-selected. Here is a demo.
suggestions Array [] An array of suggestions that are used as basis for showing suggestions. Here is a demo.
delimiters Array [ENTER, TAB] Specifies which characters should terminate tags input.
placeholder String Add new tag The placeholder shown for the input. Here is a demo.
labelField String text Provide an alternative label property for the tags. Here is a demo
handleAddition Function undefined Function called when the user wants to add a tag (required).
handleDelete Function undefined Function called when the user wants to delete a tag (required).
handleDrag Function undefined Function called when the user drags a tag.
handleFilterSuggestions Function undefined Function called when filtering suggestions.
handleTagClick Function undefined Function called when the user wants to know which tag was clicked.
autofocus Boolean true Boolean value to control whether the text-input should be autofocused on mount. Here is a demo.
allowDeleteFromEmptyInput Boolean true Boolean value to control whether tags should be deleted when the 'Delete' key is pressed in an empty Input Box. Here is a demo.
handleInputChange Function undefined Event handler for input onChange.
handleInputFocus Function undefined Event handler for input onFocus.
handleInputBlur Function undefined Event handler for input onBlur.
minQueryLength Number 2 How many characters are needed for suggestions to appear. Here is a demo.
removeComponent Function Function to render custom remove component for the tags.
autocomplete Boolean/Number false Ensure the first matching suggestion is automatically converted to a tag when a delimiter key is pressed. Here is a demo.
readOnly Boolean false Read-only mode without the input box and removeComponent and drag-n-drop features disabled. Here is a demo.
name String undefined The name attribute added to the input . Here is a demo.
id String undefined The id attribute added to the input . Here is a demo.
maxLength Number Infinity The maxLength attribute added to the input. Here is a demo.
inline Boolean true Render input field and selected tags in-line. Here is a demo.
inputFieldPosition String inline Specify position of input field relative to tags
allowUnique Boolean true Boolean value to control whether tags should be unqiue. Here is a demo.
allowDragDrop Boolean true Implies whether tags should have drag-n-drop features enabled. Here is a demo.
renderSuggestion Function undefined Render prop for rendering your own suggestions.
inputProps Object {} The extra attributes which are passed to the input field.
allowAdditionFromPaste boolean true Implies whether to allow paste action when adding tags. Here is a demo.
editable boolean false Implies whether the tags should be editable. Here is a demo.
onTagUpdate Function This callback if present is triggered when tag is edited.
clearAll boolean false Implies whether 'clear all' button should be shown. Here is a demo.
onClearAll Function This callback if present is triggered when clear all button is clicked.

tags

An array of tags that are displayed as pre-selected. Each tag should have an id property, property for the label, which is specified by the labelField and class for label, which is specified by className.

// With default labelField
const tags =  [ { id: "1", text: "Apples" } ]

// With labelField of `name`
const tags =  [ { id: "1", name: "Apples" } ]

// With className
const tags = [ { id: "1", text: "Apples", className: 'red'} ]

Here is a demo.

suggestions

An array of suggestions that are used as basis for showing suggestions. These objects should follow the same structure as the tags. So if the labelField is name, the following would work:

// With labelField of `name`
const suggestions = [
    { id: "1", name: "mango" },
    { id: "2", name: "pineapple"},
    { id: "3", name: "orange" },
    { id: "4", name: "pear" }
];

Here is a demo.

delimiters

Specifies which characters should terminate tags input. An array of character codes.

const Keys = {
    TAB: 9,
    SPACE: 32,
    COMMA: 188,
};
<ReactTags
    delimiters={[Keys.TAB, Keys.SPACE, Keys.COMMA]}
 />

placeholder

The placeholder shown for the input.

let placeholder = "Add new country"

Here is a demo.

labelField

Provide an alternative label property for the tags.

<ReactTags
    tags={tags}
    suggestions={}
    labelField={'name'}
    handleDrag={}
 />

This is useful if your data uses the text property for something else. Here is a demo.

handleAddition

Function called when the user wants to add a tag (either a click, a tab press or carriage return)

function(tag) {
    // add the tag to the tag list
}

handleDelete

Function called when the user wants to delete a tag

function(i) {
    // delete the tag at index i
}

handleDrag

If you want tags to be draggable, you need to provide this function. Function called when the user drags a tag.

function(tag, currPos, newPos) {
    // remove tag from currPos and add in newPos
}

handleFilterSuggestions

To assert control over the suggestions filter, you may contribute a function that is executed whenever a filtered set of suggestions is expected. By default, the text input value will be matched against each suggestion, and those that start with the entered text will be included in the filters suggestions list. If you do contribute a custom filter function, you must return an array of suggestions. Please do not mutate the passed suggestions array.

For example, if you prefer to override the default filter behavior and instead match any suggestions that contain the entered text anywhere in the suggestion, your handleFilterSuggestions property may look like this:

function(textInputValue, possibleSuggestionsArray) {
    var lowerCaseQuery = textInputValue.toLowerCase()

    return possibleSuggestionsArray.filter(function(suggestion)  {
        return suggestion.toLowerCase().includes(lowerCaseQuery)
    })
}

Note: The above custom filter uses String.prototype.includes, which was added to JavaScript as part of the ECMAScript 7 specification. If you need to support a browser that does not yet include support for this method, you will need to either refactor the above filter based on the capabilities of your supported browsers, or import a polyfill for String.prototype.includes.

handleTagClick

Function called when the user wants to know which tag was clicked

function(i) {
    // use the tag details at index i
}

autofocus

Optional boolean param to control whether the text-input should be autofocused on mount.

<ReactTags
    autofocus={false}
    ...>

Here is a demo.

allowDeleteFromEmptyInput

Optional boolean param to control whether tags should be deleted when the 'Delete' key is pressed in an empty Input Box.

<ReactTags
    allowDeleteFromEmptyInput={false}
    ...>

Here is a demo.

handleInputChange

Optional event handler for input onChange

<ReactTags
    handleInputChange={this.handleInputChange}
    ...>

handleInputFocus

Optional event handler for input onFocus

<ReactTags
    handleInputFocus={this.handleInputFocus}
    ...>

handleInputBlur

Optional event handler for input onBlur

<ReactTags
    handleInputBlur={this.handleInputBlur}
    ...>

minQueryLength

Minimum number of characters needed for suggestions to appear. Defaults to 2.

Here is a demo.

removeComponent

If you'd like to supply your own tag delete/remove element, create a React component and pass it as a property to ReactTags using the removeComponent option. By default, a simple anchor link with an "x" text node as its only child is rendered, but if you'd like to, say, replace this with a <button> element that uses an image instead of text, your markup may look something like this:

import {WithContext as ReactTags} from 'react-tag-input'

class Foo extends React.Component {
   render() {
      return <ReactTags removeComponent={RemoveComponent}/>
   }
}

class RemoveComponent extends React.Component {
   render() {
     const { className, onRemove } = this.props;
      return (
         <button onClick={onRemove} className={className}>
            <img src="my-icon.png" />
         </button>
      )
   }
}

The below props will be passed to the removeComponent. You will need to forward the relevant props to your custom remove component to make it work.

Name Type Description
className string The prop classNames.remove passed to the ReactTags component gets forwarded to the remove component. Defaults to ReactTags__remove
onRemove Function The callback to be triggered when tag is removed, you will need to pass this to the onClick handler of the remove component
onKeyDown Function The callback to be triggered when keydown event occurs. You will need to pass this to onKeyDown handler of the remove component
aria-label string The aria-label to be announced when the tag at an index is deleted
tag
{ id?: string, className: string, key: string }
The tag to be deleted.
index number the index of the tag to be deleted.

autocomplete

Useful for enhancing data entry workflows for your users by ensuring the first matching suggestion is automatically converted to a tag when a delimiter key is pressed (such as the enter key). This option has three possible values:

  • true - when delimeter key (such as enter) is pressed, first matching suggestion is used.
  • 1 - when delimeter key (such as enter) is pressed, matching suggestion is used only if there is a single matching suggestion
  • false (default) - tags are not autocompleted on enter/delimiter

This option has no effect if there are no suggestions. Here is a demo.

readOnly

Renders the component in read-only mode without the input box and removeComponent. This also disables the drag-n-drop feature.

Here is a demo.

name

The name attribute added to the input.

<ReactTags
    name = "inputName"
    ...>

Here is a demo.

id

The id attribute added to the input.

<ReactTags
    id = "inputId"
    ...>

Here is a demo.

maxLength

The maxLength attribute added to the input. Specifies the maximum number of characters allowed in the input field.

<ReactTags
    maxLength = "42"
    ...>

Here is a demo.

inline

The inline attributes decides whether the input fields and selected tags will be rendered in-line.

<ReactTags
    inline
    ...>

img

<ReactTags
    inline={false}
    ...>

img

This attribute is deprecated and will be removed in v7.x.x, see inputFieldPosition. Here is a demo.

inputFieldPosition

The inputFieldPosition attribute decides the positioning of the input field relative to the tags. Can be one of inline, top or bottom.

<ReactTags
    inputFieldPosition="inline"
    ...>

img

<ReactTags
    inputFieldPosition="top"
    ...>

img

<ReactTags
    inputFieldPosition="bottom"
    ...>

img

Here is a demo.

allowUnique

This prop controls whether tags should be unique. Here is a demo.

allowDragDrop

This prop controls whether tags should have the drag-n-drop feature enabled.

Here is a demo.

renderSuggestion

This props allows to provide your own suggestion renderer and override the default one. It receives the suggestion and the query string as parameters. For example:

<ReactTags
    renderSuggestion = {({ text }, query) => <div style={{ textDecoration: 'underline', textDecorationStyle: 'wavy' }}>{text} ({ query })</div>}
    ...>

inputProps

When you want to pass additional attributes to the input element (for example autocomplete, disabled etc) you can use this prop.

<ReactTags
  inputProps = {{
    disabled: true,
    autocomplete: "off"
  }}
/>

allowAdditionFromPaste

This prop implies whether to allow paste action for adding tags. Defaults to true.

Here is a demo.

editable

This prop implies whether the tags should be editable. Defaults to false.

Here is a demo.

onTagUpdate

onTagUpdate(editIndex, tag) => void;

This callback is if present is triggered when tag is updated. The edit index and the tag are passed in the callback. You can update the tags prop in this callback.

clearAll

This props implies whether 'clear all' button should be shown. Defaults to false.

Here is a demo.

onClearAll

This callback is if present is triggered when "clear all" button is clicked. You can set the tags prop to empty in this callback.

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. By default, the component provides the following classes with which you can style -

  • ReactTags__tags
  • ReactTags__tagInput
  • ReactTags__tagInputField
  • ReactTags__selected
  • ReactTags__selected ReactTags__tag
  • ReactTags__selected ReactTags__remove
  • ReactTags__suggestions
  • ReactTags__activeSuggestion
  • ReactTags__editTagInput
  • ReactTags__editTagInputField
  • ReactTags__clearAll

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

If you need to set your own class names on the component, you may pass in a classNames prop.

  <ReactTags
    classNames={{
      tags: 'tagsClass',
      tagInput: 'tagInputClass',
      tagInputField: 'tagInputFieldClass',
      selected: 'selectedClass',
      tag: 'tagClass',
      remove: 'removeClass',
      suggestions: 'suggestionsClass',
      activeSuggestion: 'activeSuggestionClass',
      editTagInput: 'editTagInputClass',
      editTagInputField: 'editTagInputField',
      clearAll: 'clearAllClass',
    }}
    ...>

Dev

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

Set up instructions

git clone [email protected]:react-tags/react-tags.git
cd react-tags
npm install
npm run precommit
npm run start

open http://localhost:8090/example

Contributing

Got ideas on how to make this better? Open an issue!

Thanks

The autocomplete dropdown is inspired by Lea Verou's awesomeplete library. The Drag and drop functionality is provided by Dan Abramov's insanely useful ReactDND library.

Also thanks to the awesome contributors who've made the library far better!

Comments
  • Update eslint-plugin-jest to the latest version 🚀

    Update eslint-plugin-jest to the latest version 🚀

    The devDependency eslint-plugin-jest was updated from 22.1.3 to 22.3.1.

    This version is not covered by your current version range.

    If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.


    Release Notes for v22.3.1

    22.3.1 (2019-03-12)

    Bug Fixes

    • no-identical-title: not reporting when using backticks (#237) (4f8ef6d), closes #232
    Commits

    The new version differs by 13 commits.

    • 4f8ef6d fix(no-identical-title): not reporting when using backticks (#237)
    • 42d2d42 chore: refresh lockfile
    • 3a1dc2d chore(package): update to [email protected] (#228)
    • 6cd30a7 feat(rules): add prefer-called-with rule
    • a3edd21 fix: use range instead of start/end properties (#221)
    • 47e79c8 fix: dummy commit for release
    • d912a70 Revert "chore: add changelog to release process (#214)"
    • 332176d chore: fix typo
    • 924daed chore: add github semantic release plugin
    • 13b7c98 chore(release): 22.2.0 [skip ci]
    • 0933d82 feat(rules): add prefer-todo rule (#218)
    • 8dd5a80 chore: bump jest to v24 (#216)
    • 176832e chore: add changelog to release process (#214)

    See the full diff

    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


    Your Greenkeeper bot :palm_tree:

    greenkeeper 
    opened by greenkeeper[bot] 33
  • Update react-dnd to the latest version 🚀

    Update react-dnd to the latest version 🚀

    There have been updates to the react-dnd monorepo:

    These versions are not covered by your current version range.

    If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.

    This monorepo update includes releases of one or more dependencies which all belong to the react-dnd group definition.


    Find out more about this release.

    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


    Your Greenkeeper bot :palm_tree:

    greenkeeper 
    opened by greenkeeper[bot] 24
  • Changes suggestions to use the provided labelField

    Changes suggestions to use the provided labelField

    This pull request changes Suggestions to use the provided labelField instead of always using hardcoded .text property, so that the suggestions and tags don't have to be mapped differently.

    under Review 
    opened by josh-degraw 23
  • Update eslint-plugin-jest to the latest version 🚀

    Update eslint-plugin-jest to the latest version 🚀

    Version 21.18.0 of eslint-plugin-jest was just published.

    Dependency eslint-plugin-jest
    Current Version 21.15.1
    Type devDependency

    The version 21.18.0 is not covered by your current version range.

    If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.

    It might be worth looking into these changes and trying to get this project onto the latest version of eslint-plugin-jest.

    If you have a solid test suite and good coverage, a passing build is a strong indicator that you can take advantage of these changes directly by merging the proposed change into your project. If the build fails or you don’t have such unconditional trust in your tests, this branch is a great starting point for you to work on the update.


    Release Notes v21.18.0

    21.18.0 (2018-07-17)

    Features

    Commits

    The new version differs by 11 commits.

    • 5208173 chore(ci): attempt to add npm token
    • b5a13fd feat(rules): add prefer-inline-snapshots (#129)
    • 2b55a86 Create LICENSE
    • f605560 docs: clean up rules table links (#122)
    • e40113d chore(package): update to [email protected] (#120)
    • d7f3de3 feat: add fixer for lowercase-name rule (#119)
    • ca2d60b docs(readme): add no-jasmine-global to Readme (#117)
    • 885ce17 fix: handle callexpressions with anonymous calles
    • 7707e14 feat(rules): add no-jasmine-globals (#116)
    • 523e2f4 fix(rules): don't crash on require() (#115)
    • 4586bdc fix(valid-describe): allow concise body arrow function (#106)

    See the full diff

    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


    Your Greenkeeper bot :palm_tree:

    greenkeeper 
    opened by greenkeeper[bot] 21
  • Read only view

    Read only view

    Is there a way to show the tags without the edit mode? Like i do not want to show a delete x or input field to add more tags. Just want to list my tags.

    opened by aaronucsd 21
  • Update eslint-plugin-jest to the latest version 🚀

    Update eslint-plugin-jest to the latest version 🚀

    The devDependency eslint-plugin-jest was updated from 22.21.0 to 23.0.0.

    This version is not covered by your current version range.

    If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.


    Publisher: simenb License: MIT

    Release Notes for v23.0.0

    23.0.0 (2019-10-27)

    Bug Fixes

    • require-tothrow-message: rename rule to require-to-throw-message (#306) (53653c1), closes #296

    chore

    Features

    • support ignoreTypeOfDescribeName in valid-title (7dec202), closes #431

    BREAKING CHANGES

    • require-tothrow-message: Rename require-tothrow-message to require-to-throw-message
    • new rules added to recommended config
    • valid-describe no longer validates the title - use
      valid-title for that purpose
    • Minimum node version is now 8
    Commits

    The new version differs by 12 commits.

    • d2afda5 chore: remove travis
    • 53653c1 fix(require-tothrow-message): rename rule to require-to-throw-message (#306)
    • 14cb815 chore: update recommended config
    • 24ddc1b chore: move danger to GH action
    • 6de136a chore: test on both eslint 5 and 6
    • 7fafcd2 chore: generate changelog file as part of release
    • b9213e0 chore: update dependencies
    • 7dec202 feat: support ignoreTypeOfDescribeName in valid-title
    • 1275471 chore: move title type checking from valid-describe to valid-title
    • bb2d09e chore: merge no-empty-title into valid-title
    • 2ce233c chore: drop [email protected] support
    • a7ba3e4 chore: build next branch and PRs against next

    See the full diff


    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


    Your Greenkeeper bot :palm_tree:

    greenkeeper 
    opened by greenkeeper[bot] 20
  • Update core-js to the latest version 🚀

    Update core-js to the latest version 🚀

    The dependency core-js was updated from 2.6.10 to 3.3.0.

    This version is not covered by your current version range.

    If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.


    Publisher: zloirock License: MIT

    Find out more about this release.


    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


    Your Greenkeeper bot :palm_tree:

    greenkeeper 
    opened by greenkeeper[bot] 20
  • Add support for react-dnd 6+

    Add support for react-dnd 6+

    With these dependendencies:

       "react": "^16.8.6",
        "react-dnd": "^9.3.2",
        "react-dnd-html5-backend": "^9.3.2",
        "react-dom": "^16.8.6",
        "react-tag-input": "^6.4.0",
    

    I'm getting:

    TypeError: (0 , _reactDnd.DragDropContext) is not a function
    ./node_modules/react-materialui-tags/dist-modules/components/ReactTags.js
    
    help wanted released 
    opened by mescarra 18
  • Drag and Drop feature on the webpage got disabled once tag(s) is added

    Drag and Drop feature on the webpage got disabled once tag(s) is added

    Hi, it's me again.

    I have realized one behavior on the react-tag-input component which is once a tag has been added, I could not drag and drop files into my webpage anymore (I have a react-dropzone Drag and Drop section on my screen).

    When I dragged my file(s) onto the screen, a "No Entry" symbol is shown besides my cursor instead of "+ Copy" label. I do not understand what is the factor which caused this. Can anyone please kindly advise.

    released 
    opened by Adrian-CL 17
  • Update jest to the latest version 🚀

    Update jest to the latest version 🚀

    Version 21.0.0 of jest just got published.

    Dependency jest
    Current Version 20.0.4
    Type devDependency

    The version 21.0.0 is not covered by your current version range.

    Without accepting this pull request your project will work just like it did before. There might be a bunch of new features, fixes and perf improvements that the maintainers worked on for you though.

    I recommend you look into these changes and try to get onto the latest version of jest. Given that you have a decent test suite, a passing build is a strong indicator that you can take advantage of these changes by merging the proposed change into your project. Otherwise this branch is a great starting point for you to work on the update.


    Not sure how things should work exactly?

    There is a collection of frequently asked questions and of course you may always ask my humans.


    Your Greenkeeper Bot :palm_tree:

    greenkeeper 
    opened by greenkeeper[bot] 17
  • Update react-dnd to the latest version 🚀

    Update react-dnd to the latest version 🚀

    There have been updates to the react-dnd monorepo:

    These versions are not covered by your current version range.

    If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.

    This monorepo update includes releases of one or more dependencies which all belong to the react-dnd group definition.


    Find out more about this release.

    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


    Your Greenkeeper bot :palm_tree:

    greenkeeper 
    opened by greenkeeper[bot] 14
  • chore(deps-dev): bump jest from 22.4.4 to 29.0.3

    chore(deps-dev): bump jest from 22.4.4 to 29.0.3

    Bumps jest from 22.4.4 to 29.0.3.

    Release notes

    Sourced from jest's releases.

    v29.0.3

    Features

    • [@jest/environment, jest-runtime] Allow passing a generic type argument to jest.createMockFromModule<T>() method (#13202)
    • [expect] Expose ExpectationResult type (#13240)
    • [jest-snapshot] Expose Context type (#13240)
    • [@jest/globals] Add jest.Mock type helper (#13235)

    Fixes

    • [jest-core] Capture execError during TestScheduler.scheduleTests and dispatch to reporters (#13203)
    • [jest-resolve] Make sure to resolve module paths after looking at exports (#13242)
    • [jest-resolve] Improve error on module not found deep in the require stack (#8704)
    • [jest-snapshot] Fix typings of snapshot matchers (#13240)

    Chore & Maintenance

    • [*] Fix inconsistent workspace prefixes (#13217)
    • [jest-haste-map] Expose a minimal public API to TypeScript (#13023)

    New Contributors

    Full Changelog: https://github.com/facebook/jest/compare/v29.0.2...v29.0.3

    v29.0.2

    Features

    • [jest-transform] Expose TransformFactory type (#13184)

    Fixes

    • [babel-plugin-jest-hoist] Support imported jest in mock factory (#13188)
    • [jest-mock] Align the behavior and return type of generateFromMetadata method (#13207)
    • [jest-runtime] Support jest.resetModules() with ESM (#13211)

    New Contributors

    Full Changelog: https://github.com/facebook/jest/compare/v29.0.1...v29.0.2

    v29.0.1

    Fixes

    • [jest-snapshot] Pass snapshotFormat through when diffing snapshots (#13181)

    Full Changelog: https://github.com/facebook/jest/compare/v29.0.0...v29.0.1

    ... (truncated)

    Changelog

    Sourced from jest's changelog.

    29.0.3

    Features

    • [@jest/environment, jest-runtime] Allow passing a generic type argument to jest.createMockFromModule<T>() method (#13202)
    • [expect] Expose ExpectationResult type (#13240)
    • [jest-snapshot] Expose Context type (#13240)
    • [@jest/globals] Add jest.Mock type helper (#13235)

    Fixes

    • [jest-core] Capture execError during TestScheduler.scheduleTests and dispatch to reporters (#13203)
    • [jest-resolve] Make sure to resolve module paths after looking at exports (#13242)
    • [jest-resolve] Improve error on module not found deep in the require stack (#8704)
    • [jest-snapshot] Fix typings of snapshot matchers (#13240)

    Chore & Maintenance

    • [*] Fix inconsistent workspace prefixes (#13217)
    • [jest-haste-map] Expose a minimal public API to TypeScript (#13023)

    29.0.2

    Features

    • [jest-transform] Expose TransformFactory type (#13184)

    Fixes

    • [babel-plugin-jest-hoist] Support imported jest in mock factory (#13188)
    • [jest-mock] Align the behavior and return type of generateFromMetadata method (#13207)
    • [jest-runtime] Support jest.resetModules() with ESM (#13211)

    29.0.1

    Fixes

    • [jest-snapshot] Pass snapshotFormat through when diffing snapshots (#13181)

    29.0.0

    Features

    • [expect] [BREAKING] Differentiate between MatcherContext MatcherUtils and MatcherState types (#13141)
    • [jest-circus] Add support for test.failing.each (#13142)
    • [jest-config] [BREAKING] Make snapshotFormat default to escapeString: false and printBasicPrototype: false (#13036)
    • [jest-config] [BREAKING] Remove undocumented collectCoverageOnlyFrom option (#13156)
    • [jest-environment-jsdom] [BREAKING] Upgrade to [email protected] (#13037, #13058)
    • [@jest/globals] Add jest.Mocked, jest.MockedClass, jest.MockedFunction and jest.MockedObject utility types (#12727)
    • [jest-mock] [BREAKING] Refactor Mocked* utility types. MaybeMockedDeep and MaybeMocked became Mocked and MockedShallow respectively; only deep mocked variants of MockedClass, MockedFunction and MockedObject are exported (#13123, #13124)

    ... (truncated)

    Commits
    Maintainer changes

    This version was pushed to npm by simenb, a new releaser for jest since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 0
  • chore(deps-dev): bump node-sass from 6.0.1 to 7.0.3

    chore(deps-dev): bump node-sass from 6.0.1 to 7.0.3

    Bumps node-sass from 6.0.1 to 7.0.3.

    Release notes

    Sourced from node-sass's releases.

    v7.0.3

    Dependencies

    • Bump sass-graph from 4.0.0 to ^4.0.1

    Supported Environments

    OS Architecture Node
    Windows x86 & x64 12, 14, 16, 17
    OSX x64 12, 14, 16, 17
    Linux* x64 12, 14, 16, 17
    Alpine Linux x64 12, 14, 16, 17
    FreeBSD i386 amd64 12, 14

    *Linux support refers to major distributions like Ubuntu, and Debian

    v7.0.2

    This release has been unpublished

    v7.0.1

    Dependencies

    • Bump node-gyp from 7.1.2 to 8.4.1
    • Bump sass-graph from 2.2.5 to 4.0.0

    Supported Environments

    OS Architecture Node
    Windows x86 & x64 12, 14, 16, 17
    OSX x64 12, 14, 16, 17
    Linux* x64 12, 14, 16, 17
    Alpine Linux x64 12, 14, 16, 17
    FreeBSD i386 amd64 12, 14

    *Linux support refers to major distributions like Ubuntu, and Debian

    v7.0.0

    Breaking changes

    Features

    Dependencies

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 0
  • Is there a way customize rendering of tags?

    Is there a way customize rendering of tags?

    I'd like to render certain tags differently depending on their ID, so that certain tags (those who are in the suggestions list in my case) are rendered with a different background color. Is this possible?

    opened by patrik-u 0
  • chore(deps-dev): bump webpack-bundle-analyzer from 3.9.0 to 4.6.1

    chore(deps-dev): bump webpack-bundle-analyzer from 3.9.0 to 4.6.1

    Bumps webpack-bundle-analyzer from 3.9.0 to 4.6.1.

    Changelog

    Sourced from webpack-bundle-analyzer's changelog.

    4.6.1

    4.6.0

    4.5.0

    4.4.2

    • Bug Fix
      • Fix failure with compiler.outputFileSystem.constructor being undefined (#447 by @​kedarv and @​alexander-akait)
        • NOTE: This fix doesn't have added test coverage so the fix might break in future versions unless test coverage is added later.

    4.4.1

    4.4.0

    • Improvement

    • Bug Fix

      • Don't show an empty tooltip when hovering over the FoamTree attribution group or between top-level groups (#413 by @​stanislawosinski)
    • Internal

    4.3.0

    • Improvement

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 0
  • chore(deps-dev): bump semantic-release from 17.4.4 to 19.0.5

    chore(deps-dev): bump semantic-release from 17.4.4 to 19.0.5

    Bumps semantic-release from 17.4.4 to 19.0.5.

    Release notes

    Sourced from semantic-release's releases.

    v19.0.5

    19.0.5 (2022-08-23)

    Reverts

    v19.0.4

    19.0.4 (2022-08-22)

    Bug Fixes

    v19.0.3

    19.0.3 (2022-06-09)

    Bug Fixes

    • log-repo: use the original form of the repo url to remove the need to mask credentials (#2459) (58a226f), closes #2449

    v19.0.2

    19.0.2 (2022-01-18)

    Bug Fixes

    • npm-plugin: upgraded to the stable version (0eca144)

    v19.0.1

    19.0.1 (2022-01-18)

    Bug Fixes

    • npm-plugin: upgraded to the latest beta version (8097afb)

    v19.0.0

    19.0.0 (2022-01-18)

    Bug Fixes

    • npm-plugin: upgraded to the beta, which upgrades npm to v8 (f634b8c)

    ... (truncated)

    Commits
    • 8f07522 Revert "fix(deps): update dependency yargs to v17" (#2534)
    • 2f4bcef docs: add semantic-release-react-native to plugin list (#2523)
    • f419080 fix(deps): update dependency yargs to v17 (#1912)
    • 3bbf08c test(integration): upgrade the gitbox image to support arm architecture in ad...
    • 846f4c2 build(deps): bump terser from 5.14.0 to 5.14.2 (#2513)
    • bd294eb docs(plugin-list): add semantic-release-space plugin (#2502)
    • c69445e docs: remove deprecated keyword in gitlab-ci.md (#2498)
    • d80e2ea build(deps-dev): bump got from 11.8.3 to 11.8.5 (#2485)
    • 9589a96 docs: fix typos (#2476)
    • ec89bab docs: replace issue templates with forms (#2474)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 0
  • Different array of tags in the same page

    Different array of tags in the same page

    Hi, I have an array of elements in the same page, each one should have different tags.

    I wish to achieve something like this:

    [
        [
            {
                "id":"Italy",
                "text":"Whatever"
            },
            {
                "id":"Germany",
                "text":"Whatever"
            }
        ],
        [
            {
                "id":"Brazil",
                "text":"Whatever"
            },
            {
                "id":"Argentina",
                "text":"Whatever"
            }
        ]
    ]
    

    I tried this:

    const [tags, setTags] = React.useState([[]]);

    ...to try map as below:

    <ReactTags
        tags={tags[index]}
        ...
        autocomplete
    />
    

    This fails as: "TypeError: tags.map is not a function"

    So how can I achieve that? I need to store objects arrays of tags.

    Thanks.

    opened by Simoneth 0
Releases(v6.8.1)
Owner
React Tags
A lightweight simple tagging component for your projects
React Tags
Chakra UI Simple Autocomplete

A simple autocomplete input built with Chakra UI

Federico Joel Orlandau 23 Jul 21, 2022
React-simple-suggestor: search with suggestions

ssuggestor React component that enables users to quickly find and select from a pre-populated list of values as they type. Current themes provided use

Carloluis Rodriguez 18 Nov 17, 2021
WAI-ARIA compliant React autocomplete (combobox) component

React Autocomplete Accessible, extensible, Autocomplete for React.js. <Autocomplete getItemValue={(item) => item.label} items={[ { label: 'app

React Community 2.2k Aug 25, 2022
WAI-ARIA compliant React autosuggest component

React Autosuggest Project Status Looking for maintainers! Unfortunately, I don't have the time to maintain this project anymore. If you are interested

Misha Moroshko 5.9k Sep 17, 2022
⚡️ Mobile-friendly React autocomplete component

instatype A mobile-friendly React autocomplete component Demo unsplash.now.sh (source) Install npm install instatype --save Contribute npm run example

Gabe Ragland 47 Aug 23, 2022
An accessible React component to take the pain out of creating auto-suggestion components

React-Autosuggestions An accessible React component to take the pain out of creating auto-suggestion components Usage: import React from 'react'; impo

Amy Shackles 12 Sep 17, 2022
Minimalistic dropdown and auto-complete component with filtering and keyboard support

revo-dropdown Minimalistic dropdown webcomponent. After long search we couldn't find any cross platform and had to build our own inspired by the lates

Revolist 19 Jul 19, 2022
A React component for Autocomplete Hint.

react-autocomplete-hint A React component for Autocomplete Hint. Demo Demo can be found here: https://ejmudi.github.io/react-autocomplete-hint/ Instal

Mudi Ejenavi 143 Jul 19, 2022
React component for Google Maps Places Autocomplete

We are looking for maintainers! In order to ensure active development going forward, we are looking for maintainers to join the project. Please contac

Ken Hibino 1.3k Sep 21, 2022
📝 React component implements configurable GitHub's like textarea autocomplete.

react-textarea-autocomplete ?? Enhanced textarea to achieve autocomplete functionality. This package provides React Component to achieve GitHub's like

Webscope.io 412 Sep 22, 2022
React dropdown component NOW

react-dropdown-now The demo page is here. react-dropdown-now is a fork of react-dropdown. requires React >= 16.8 import { Dropdown, Selection } from '

null 12 Jul 6, 2022
React-autocomplete-pure - Typescript-friendly autocomplete component for React.js

react-autocomplete-pure Typescript-friendly autocomplete component for React.js. Fully customizable for your needs. Inspired by react-autosuggest and

null 0 Jan 8, 2022
Turnstone is a highly customisable, easy-to-use autocomplete search component for React

Turnstone is a highly customisable, easy-to-use autocomplete search component for React. Turnstone In Action Features Installation & Usage API Props C

Tom Southall 147 Sep 22, 2022
A fantastically simple tagging component for your projects

React tags React-tags is a simple tagging component ready to drop in your projects. The component is inspired by GMail's To field in the compose windo

React Tags 1.3k Sep 29, 2022
A simple star rating component for your React projects

react-stars ⭐ A simple star rating component for your React projects (now with half stars and custom characters) Get started quickly Install react-sta

N49 196 Sep 11, 2022
Flipping Cards for your React Projects. React-Flippy allows you to create flipper event with your content.

React-Flippy React-Flippy allows you to create flipping cards in React projects. It can be used as controlled or uncontrolled component. Live Demo How

Berkay Aydın 307 Sep 29, 2022
This is simple CRUD React & Redux application. You can create, update,delete your projects and also filter them by their priority

ProjectList This is simple CRUD React & Redux application.You can create,update,delete your projects and also filter them by their priority. Main page

Murodjon Tursunpulatov 3 Jul 5, 2021
React Oxide is a simple code editor that you can add to your ReactJS projects.

React Oxide is a simple code editor that you can add to your ReactJS projects.

bootrino 127 Aug 28, 2022
A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

Join our Community Slack Quick Installation Guide What is Reactotron? Reactotron is a macOS, Windows, and Linux app for inspecting your React JS and R

Infinite Red, Inc. 13.7k Sep 24, 2022
A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

Join our Community Slack Quick Installation Guide What is Reactotron? Reactotron is a macOS, Windows, and Linux app for inspecting your React JS and R

Infinite Red, Inc. 13.7k Sep 21, 2022