Building a tags input in ReactJS

So we all are at that point we have to create an input where user can enter values to add them as tags. So here I am walking you through the process of creating such kind of input in ReactJS.

Let’s start by installing some dependencies first. We will going to use elemental-ui to simplify the process of writing our UI.

We will be using webpack as our build tool.

Fire up your terminal inside your project and run

npm install --save elemental
npm install --save-dev less-loader less style-loader css-loader

In case you are wondering why we are installing less, elemental use less so we need less-loader to load elemental style file.

Now let’s configure our webpack config to resolve less files. Add this lines to your webpack.config.js

Okay so we are ready to roll now. Start by creating a file for our TagsInput component.

touch TagsInput.js

Let’s import some components from our installed libraries. We are also going to install react-onevent to capture space event.

npm install --save react-onevent

Now import all the dependencies

Now it is time to write our component

We are defining two variable in our state tagsInputValue for holding our tags input value and tags for holding tags in an array.

We will be using FormInput from elemental ui to get input from user. Inside your component write :-

Let me explain what we just did. We pull out tagsInputValue & tags out from our state then wrapped our FormInput component inside OnEvent component and passed tagsInputValue as value to FormInput.

On every change we are calling this.updateTagValue which updates tagsInputValue resulting in render process to trigger again with the updated value inside the FormInput.

We passed OnEvent component a space prop with the callback which will be called whenever user press spacebar on FormInput. It will call this.addTag and that tag will be added to out tags list.

Let’s create this.addTag & this.updateTagValue

I am going to start with updateTagValue. This function takes a argument value and update tagsInputValue. It also check if the argument passed is equal to space if it is function returns from there and will not update the state value.

Let’s talk about addTag function. As you can see this function takes one tag as an argument then trim it to remove any spaces around the tag. Then it checks if tag exist in the tags array if tag does not exist inside the array it append the tag to existing array and calls updateTags function which is responsible for updating our tags array. At last it empty the input by calling updateTagValue with a blank string.

removeTag is a very simple function it takes a tag as an argument and filters it out from array and then updates the array.

now at last the updateTags it just take passed tags and update them in the state.

Now to finish this component up let’s show our tags to the users. Add these lines after OnEvent component.

We are iterating over the array of tags and using elemental Pill component to showcase our tags. We are also providing the users with the ability to remove the array by passing this.removeTag when to onClear prop of Pill component.

Here is the full code in one file :

Okay so now the moment of truth you can use this component in other component by just importing it into them.

import TagsInput from 'path/to/taginput';
// inside component render
<TagsInput />

So this was it I hope you now understand creating a tags input is damn easy. :)

Hi, My name is Manoj Singh Negi. I am a Javascript Developer and writer follow me at Twitter or Github.

Peace.

✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.