Create a tags input component in React

Today you will learn how to create a tags input component in React. In other words, we will show you how to create a comma separated tags in the input field.

Checkout more articles on ReactJS

• Checkbox list example in React
• React Interview Questions and Answers
• How to add Font Awesome 5 in React
• MultiSelect dropdown in React
• Get the country flag from the country code in React

Demo Application

Output - Create a tags input component in React - Clue Mediator

Steps to create a tags input component in React

1. Install package
2. Add tags input in component
3. Output

1. Install package

Here, we will use the react-tagsinput NPM package to create a tags input in React component. Run the following command to install the package.

npm i react-tagsinput

2. Add tags input in component

Just like other react packages, we have to import it on top and render the tags in the react component.

import React, { useState } from 'react';

import TagsInput from 'react-tagsinput';
import 'react-tagsinput/react-tagsinput.css';

function App() {

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

  const handleChange = value => {
    setTags(value);
  }

  return (
    <div class="app">
      <h4>Create a tags input component in React - <a href="https://www.cluemediator.com" target="_blank" rel="noopener">Clue Mediator</a></h4>

      <tagsinput inputprops={{ placeholder: 'enter tags' }} class="tag-box react-tagsinput" maxtags={10} value={tags} onchange={handleChange}>

      <div>Tags: {tags.join(', ')}</div>
    </tagsinput></div>
  );
}

export default App;

This is a simple and easy to use for tags input. Here you can also pass additional props such as `maxTags`, `inputProps` and many more. Click Here to check more props.

3. Output

Run the application and check the output in the browser.

I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂

Demo & Source Code

GitHub Repository