How to create a tag input system in React JS

Creating a tag input system in ReactJS involves several steps. A tag input system allows users to enter tags or keywords, typically separated by commas or spaces. Here’s a basic example of how you can implement a tag input system in ReactJS.

Requirements

• react-tag-input

Step 1: Set up your React project

If you haven’t already set up your React project, you need to create one by pasting the below command in your terminal.

npx create-react-app input-tag-react

Step 2: Install the react-tag-input package

Open the terminal inside your project and run the below command to install the package

npm install react-tag-input

Step 3: Create an InputTag Component

Now inside your project root directory create a file with the name InputTag.js and paste the below code.

import React from "react";
import { WithContext as ReactTags } from "react-tag-input";

// Specifies which characters should terminate tags input. An array of character codes.
const KeyCodes = {
  comma: 188,
  enter: 13,
};

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

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

  // Method to delete tag from Array
  const handleDelete = (i) => {
    setTags(tags.filter((tag, index) => index !== i));
  };

  // Method to Add tag into Array
  const handleAddition = (tag) => {
    setTags([...tags, tag]);
  };
  return (
    <div id="tags">
      <ReactTags
        tags={tags}
        delimiters={delimiters}
        handleDelete={handleDelete}
        handleAddition={handleAddition}
        inputFieldPosition="bottom"
        autocomplete
        allowDragDrop={false}
      />
    </div>
  );
};

export default InputTag;

Step 4: Styling Component

Now we will style our component to make it visually appealing. Paste the below code in your CSS file.

#tags {
  width: 40%;
  margin: 50px auto;
}

#tags .ReactTags__tags {
  position: relative;
  display: flex;
  align-items: center;
  background-color: #f9f9f9;
  padding: 5px 10px;
}

#tags .ReactTags__selected {
  display: flex;
}

#tags .ReactTags__clearAll {
  cursor: pointer;
  padding: 10px;
  margin: 10px;
  background: #f88d8d;
  color: #fff;
  border: none;
}

#tags .ReactTags__tagInput {
  border-radius: 2px;
  display: inline-block;
}

#tags .ReactTags__tagInput input.ReactTags__tagInputField, #tags .ReactTags__tagInput input.ReactTags__tagInputField:focus {
  height: 31px;
  margin: 0;
  font-size: 12px;
  min-width: 150px;
  padding: 0px 10px;
}

#tags .ReactTags__editInput {
  border-radius: 1px;
}

#tags .ReactTags__editTagInput {
  display: inline-flex;
}

#tags .ReactTags__selected span.ReactTags__tag {
  border: 1px solid #ddd;
  background: #63bcfd;
  color: white;
  font-size: 12px;
  display: flex;
  padding: 5px;
  margin: 0 5px;
  border-radius: 2px;
}

#tags .ReactTags__selected a.ReactTags__remove {
  color: #aaa;
  margin-left: 5px;
  cursor: pointer;
}

#tags .ReactTags__suggestions {
  position: absolute;
}

#tags .ReactTags__suggestions ul {
  list-style-type: none;
  box-shadow: 0.05em 0.01em 0.5em rgba(0, 0, 0, 0.2);
  background: white;
  width: 200px;
}

#tags .ReactTags__suggestions li {
  border-bottom: 1px solid #ddd;
  padding: 5px 10px;
  margin: 0;
}

#tags .ReactTags__suggestions li mark {
  text-decoration: underline;
  background: none;
  font-weight: 600;
}

#tags .ReactTags__suggestions ul li.ReactTags__activeSuggestion {
  background: #b7cfe0;
  cursor: pointer;
}

#tags .ReactTags__remove {
  border: none;
  cursor: pointer;
  background: none;
  color: white;
  margin-left: 5px;
}

#tags input {
  background-color: #f9f9f9;
  border: none;
  outline: none;
}

#tags input:before {
  border: none;
}

Step 5: Integrate InputTag into App

Now import the InputTag component to your App.js file or your required component.

import "./App.css";
import InputTag from "./InputTag";

function App() {
  return (
    <div className="App">
      <InputTag />
    </div>
  );
}

export default App;

Now if we run our app and check the browser we can see that we have created a tag input system in React JS.

This is a basic implementation of a tag input system in ReactJS. You can further enhance this by adding features like validation, tag suggestions, and more advanced styling.

For any query, you can get in touch with me via LinkedIn

Below you can find the sample GitHub Repository and Codesandbox demo.

GitHub - Mediumtutorial/input-tag-react: How to create a tag input system in React JS